I am using Recharts with Next.js and Tailwindcss, I copied a barchart code snippet in Recharts to create my own barchart too. I have to change the height to aspect for it to work. But the width 100% is not working at all. The barchart remain like a block and ocuppy only few width. Pls what am I suppose to do for me to make the barchart cover the 100% width of div?
Here is my code snippet.
const MyChart = () => {
return (
<div className="flex shadow-md p-4 w-full pb-0 relative text-xs m-4">
<ResponsiveContainer width="100%" aspect={2}>
<AreaChart
width={500}
height={400}
data={data}
margin={{
top: 0,
right: 0,
left: 0,
bottom: 0,
}}
>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="name" />
<YAxis />
<Tooltip />
<Area type="monotone" dataKey="uv" stackId="1" stroke="#8884d8" fill="#8884d8" />
<Area type="monotone" dataKey="pv" stackId="1" stroke="#82ca9d" fill="#82ca9d" />
<Area type="monotone" dataKey="amt" stackId="1" stroke="#ffc658" fill="#ffc658" />
</AreaChart>
</ResponsiveContainer>
</div>
);
};
The default display of div element is
block
And block elements occupy 100% width of parent element. In this case you change display of div from block to flex so div element just occupy the width of its content so <ResponsiveContainer occupy 100%of width of this div
Im struggling with the same and although I didn't find any clear and nice solution, I got a hack that works.
In short, when screen width changes, I change the key of ResponsiveContainer so that it rerenders with correct, 100% width of its parent. The value of key is not important, the important thing is that it should change after you resize, triggering component remounting, because new key === new component for React
Im debouncing to reduce the number of unneeded rerenders, just once after finished resizing is enough.
const OverviewChart: FC<IOverviewChart> = ({ data }) => {
const [chartWidth, setChartWidth] = useState(0);
const { width } = useWindowDimensions();
const debouncedSetChartWidth = useDebounce(setChartWidth, 100);
useEffect(() => {
debouncedSetChartWidth(width);
}, [debouncedSetChartWidth, width]);
return (
<ResponsiveContainer key={chartWidth} className={styles.element} width={"100%"} height={300}>
...
</ResponsiveContainer>
);
};here is the content of useWindowDimensions custom hook
import { useEffect, useState } from "react";
export type TWindowDimensions = {
width: number;
height: number;
};
const getWindowDimensions = (): TWindowDimensions => ({
width: window.innerWidth,
height: window.innerHeight,
});
const useWindowDimensions = (): TWindowDimensions => {
const [windowDimensions, setWindowDimensions] = useState<TWindowDimensions>({
width: 0,
height: 0,
});
useEffect(() => {
const handleResize = () => {
setWindowDimensions(getWindowDimensions());
};
handleResize();
window.addEventListener("resize", handleResize);
return () => {
window.removeEventListener("resize", handleResize);
};
}, []);
return windowDimensions;
};
export default useWindowDimensions;