Невозможно изменить размер кольцевой диаграммы react-chartjs-2

Я пытаюсь сделать диаграмму пончиков с реакцией и gatsbyjs. Диаграмма работает нормально, но я не могу заставить ее использовать всю ширину div. Отображается слишком мало для зарезервированной области.

render (){
    return (

            <Doughnut 
                data={this.state.chartData}
                options={{
                    padding:"0px",
                    responsive:false,
                    maintainAspectRatio:false,
                    defaultFontSize:"14px",
                    width:"400",
                    height:"400",
                    legend:{
                        display:false,
                    },
                    plugins:{
                        datalabels: {
                            color:'#000000',
                            anchor: "start",
                            align:"end",
                            formatter: function(value, context) {
                                    return context.chart.data.labels[context.dataIndex];
            }
                        }
                    } 
                }}
                />


        )

}

reactjs javascript react-chartjs chart.js gatsby
person Ergun    schedule 20.12.2018    source источник
comment
chartjs.org/docs/latest/general/responsive.html   -  person ksav    schedule 21.12.2018

Ответы (2)


arrow_upward
12
arrow_downward

Ознакомьтесь с документами Chartjs в разделе responsive.

В переданных опциях установите responsive: true, maintainAspectRatio: true и удалите width и height.

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';
import { Doughnut } from 'react-chartjs-2'

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React',
      data: {
        datasets: [{
          data: [10, 20, 30]
        }],
        labels: [
          'Red',
          'Yellow',
          'Blue'
        ]
      }
    }
  }

  render() {
    return (

      <Doughnut
        data={this.state.data}
        options={{
          responsive: true,
          maintainAspectRatio: true,
        }}
      />
    )
  }
}

render(<App />, document.getElementById('root'));

Вот рабочий StackBlitz

person ksav    schedule 20.12.2018
comment
Благодарю вас! Работал как шарм. - person Ergun; 21.12.2018

arrow_upward

arrow_downward

person    schedule
comment
этот ответ имеет идентичный код по сравнению с ответом @ksav, он отличается только строкой maintainAspectRatio: true, для которой вы установили значение false. Можете ли вы объяснить, почему ваш ответ, который вы дали почти два года спустя и который почти идентичен, лучше соответствует вопросу? - person Erik; 17.11.2020