I am trying to use recharts to implement a BarChart. But the width={600}
and height={300}
causes the Barchart to be absolute, not responsive. How to make the Barchart a responsive one? I tried using percentage as width={'50%"} height={"40%"}
but did not work.
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';
<BarChart className="barChart" width={600} height={300} data={data}
margin={{top: 5, right: 30, left: 20, bottom: 5}} label="heaf">
<CartesianGrid strokeDasharray="3 3"/>
<XAxis dataKey="name"/>
<YAxis/>
<Tooltip/>
<Legend />
<Bar dataKey="occupied" barSize={10} fill="#05386b" />
<Bar dataKey="available" barSize={10} fill="#fdaa00" />
<Bar dataKey="cleaning" barSize={10} fill="#379583" />
<Bar dataKey="reserved" barSize={10} fill="#c60505" />
</BarChart>
You need to use ResponsiveContainer
for it to work. Also, use the percentage values without brackets.
<ResponsiveContainer width="95%" height={400}>
// your chart
</ResponsiveContainer>
I used that and it worked just fine! :)
Source: Responsive Container Docs