Can't resize react-chartjs-2 doughnut chart

Question

I am trying to make a doughnut chart with react and gatsbyjs. The chart works fine but I can not get it to use the full width of the div. It displays too small for the area reserved.

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];
            }
                        }
                    } 
                }}
                />


        )

}

Taxis

chartjs.org/docs/latest/general/responsive.html – Urbas

Answer 1

Have a look in the chartjs docs under responsive.

In the options, set responsive: true, maintainAspectRatio: true and remove width and 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'));

Here is a working StackBlitz

Urbas

Thank you! Worked like a charm. – Taxis

@Taxis did you still need help with this question? – Urbas

yes. It is answered. – Taxis

@Taxis do you want to mark the answer as accepted? – Urbas

Answer 2

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: false,
        }}
      />
    )
  }
}

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

Punjab

this answer has identical code compared to the answer by @ksav, it only differs in the line maintainAspectRatio: true which you set to false. Can you motivate why your answer, that you put in almost two years later and is almost identical is a better match for the question? – Hermosillo

because this answer worked for me and above one didn't – Partook

Answer 3

This answer is same as above two answers except an extra div in the render, see below

render() {
    return (
     <div style={{width: '10%', height: '10%'}}>
      <Doughnut
        data={this.state.data}
        options={{
          responsive: true,
          maintainAspectRatio: true,
        }}
      />
     </div>
    )
  }

Since we set the maintainAspectRatio to true, we can't set the height, width to graph itself rather we can set the height, width to its parent div which allow us to modify the dimensions easily.

Happy Coding...

Bugbane