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

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. — technogeek1995
– technogeek1995, Commented Dec 13, 2019 at 15:27

technogeek1995 · Accepted Answer · 2019-12-13 16:09:54Z

32

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

edited Dec 13, 2019 at 16:09

answered Dec 13, 2019 at 15:31

technogeek1995

3,4842 gold badges35 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

JimmyTheCode Over a year ago

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

Abdulsalam · Accepted Answer · 2022-01-08 14:21:31Z

5

Doing the following works for me:

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

Here is what the outcome looks like:

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

answered Jan 8, 2022 at 14:21

Abdulsalam

3135 silver badges6 bronze badges

Comments

fruitloaf · Accepted Answer · 2023-08-01 16:12:59Z

5

"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

edited Aug 1, 2023 at 16:12

answered Aug 1, 2023 at 16:07

fruitloaf

3,01620 silver badges14 bronze badges

2 Comments

Yves Ng Over a year ago

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

ah_hau Over a year ago

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

Steven · Accepted Answer · 2022-02-14 12:46:16Z

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>

answered Feb 14, 2022 at 12:46

Steven

1,9803 gold badges23 silver badges42 bronze badges

Comments

Nihal Dias · Accepted Answer · 2023-05-15 11:44:51Z

0

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

answered May 15, 2023 at 11:44

Nihal Dias

995 bronze badges

Collectives™ on Stack Overflow

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

5 Answers 5

1 Comment

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related