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


        )

}

https://www.chartjs.org/docs/latest/general/responsive.html – ksav Dec 20 '18 at 21:49 — ksav, Dec 20 '18 at 21:49

ksav · Answer 1 · 2021-10-22T14:15:41.497

14

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

edited Oct 22 '21 at 14:15

answered Dec 20 '18 at 22:34

ksav

20,015
6
46
66

2

Thank you! Worked like a charm. – Ergun Dec 21 '18 at 13:00
@Ergun did you still need help with this question? – ksav Sep 28 '22 at 03:10
No thank you. Everything works fine – Ergun Sep 28 '22 at 15:57
yes. It is answered. – Ergun Sep 30 '22 at 08:16
@Ergun do you want to mark the answer as accepted? – ksav Sep 30 '22 at 11:42

score 5 · Answer 2 · answered Nov 17 '20 at 13:18

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'));

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? — Erik, Nov 17 '20 at 13:38

score -1 · Answer 3 · answered Jun 26 '22 at 09:16

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...

Can't resize react-chartjs-2 doughnut chart

3 Answers3

Linked