How to resize Chart.JS element in React.js?

Question

I have a React component Webstats which returns a Doughnut chart from react-chartjs-2 library. Here is how the code looks like:

const Webstats = () => {
  //code to create chart.
  return <Doughnut data={pd} />;
}

I use this component inside another component called Dashboard. I want to display the chart alongside a Logout button. Both should be in the same row. I use flex property of css for this purpose.

const rowC = {
  display: "flex",
  flexDirection: "row"
};

const Dashboard = () => {
  return (
    <div style={rowC}>
      <Webstats />
      <Link to="/">
        <div>
          <button onClick={auth.logout}>Logout</button>
        </div>
      </Link>
    </div>
  );
};

export default Dashboard;

But the problem is that, chart size is too big as compared to logout button.

I want to make chart size small, around 30% of the width of <div style={rowC}>. I tried these things:

return <Doughnut data={pd} width="30%"/>;

and

return (
    <div style={rowC}>
      <Webstats width="30%" />
      // rest of html
)

and also

return (
    <div width="30%">
      <Doughnut data={pd} />
    </div>
  );

But none of this gives me the desired result. How to I resize the chart to 30% of the width (and height auto adjusted) of the <div style={rowC}>?

Answer 1

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

Answer 2

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

Answer 3

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>

Answer 4

"chart.js": "^2.9.3",
"react-chartjs-2": "^2.11.2"

docs: https://www.chartjs.org/docs/2.9.4/general/responsive.html

OPTIONS ARE MOST IMPORTANT:

const options = {
    maintainAspectRatio: false,
    aspectRatio: 1
    }

    <div style={{width: '500px'}}>   
            <Doughnut data={chartData} options={options}  />
    </div>

so now what ever size you put into Parent Div, e.g. 500px, will be the size of the Chart

Answer 5

Something that worked for me was to set the width manually using the style property and to add maintainAspectRatio: false to options like so:

<Pie
    style={{ width: "500px" }}
    options={{
      maintainAspectRatio: false}} />