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}>
?
Solution. 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.
To set the chart size in ChartJS, we recommend using the responsive option, which makes the Chart fill its container. You must wrap the chart canvas tag in a div in order for responsive to take effect. You cannot set the canvas element size directly with responsive .
Luckily, Chart. js does most of this complex work for us! A Chart. js chart is responsive by default, but with one limitation: it maintains its aspect ratio.
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 }}
/>
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>
Doing the following works for me:
<Doughnut />
component.Here is what the outcome looks like:
<Doughnut
data={data}
height="200px"
width="200px"
options={{ maintainAspectRatio: false }}
/>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With