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

Longevous

Are you using a CSS library like Bulma or Bootstrap? If so, you could use columns, which would simply what you're trying to do quite significantly. – Bootie

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

Bootie

That didn't quite fix it for me. For anyone else stuck, you may need to create a dedicated container (eg <div class="chart-container" style="position: relative; height:40vh; width:80vw"> <Doughnut/> </div> ) See this documentation section for more info: chartjs.org/docs/latest/general/responsive.html – Coyne

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

Kenwood

Answer 3

"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

Okra

@Tarun you should enmark this as the answer since all of the above won't work – Quirites

aspectRatio: 1 work for me, for my case i need to set it to 2 – Softfinned

Answer 4

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>

Empiric

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

Buckshee