score:16

Accepted answer

The documentation for ChartJS states that you need to set maintainAspectRatio to false for it to use the width and height props that you pass into your chart.

In order for Chart.js to obey the custom size you need to set maintainAspectRatio to false.

<Doughnut
  data={data}
  width={"30%"}
  options={{ maintainAspectRatio: false }}
/>

score:0

Doing the following works for me:

  1. set height and width on the <Doughnut /> component.
  2. Set the maintainAspectRation to false.

Here is what the outcome looks like:

<Doughnut
  data={data}
  height="200px"
  width="200px"
  options={{ maintainAspectRatio: false }}
/>

score:2

Wrap it in div Container and set width and height.

Ex:

<div style={{height:"60vh",position:"relative", marginBottom:"1%", padding:"1%"}}>
     <Doughnut options={options} data={chartData} />
</div>

Related Query

More Query from same tag