Issue with BarChart Rendering in Recharts #4141
-
I'm currently working on a project using Recharts library in Nextjs and I've encountered an issue with the rendering of the When I add one project, the bar is seen in the middle of the chart. However, when I add a new one, the layout seems to adjust and looks more balanced. I'm trying to understand why this is happening and how I can make the chart look good consistently, regardless of the number of projects. Here's a snippet of the code I'm using: <ResponsiveContainer width="100%" height={350}>
<BarChart data={chartData}>
<XAxis stroke="#888888"
fontSize={12}
tickLine={false}
axisLine={false}
dataKey="name"
/>
<YAxis
stroke="#888888"
fontSize={12}
tickLine={false}
axisLine={false}
/>
<Tooltip
contentStyle={{color: '#070809'}}
itemStyle={{color: '#8c8c8c'}}
cursor={{fill: 'rgba(38,38,38,0.3)'}}
/>
<Bar
fill="#d4d4d8"
dataKey="tasks"
className={'fill-zinc-300'}
radius={[4, 4, 0, 0]}
barSize={30}
/>
</BarChart>
</ResponsiveContainer> Any insights or suggestions on how to resolve this issue would be greatly appreciated. Thank you! |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 8 replies
-
Hi, can you give some screenshots or a codesandbox reproduction including the data that looks different when there is more than one datapoint? It sounds like the domain of the YAxis is changing which changes scale |
Beta Was this translation helpful? Give feedback.
You can set
domain={([dataMin, dataMax]) => [dataMin, dataMax + 5]}
(add whatever number you want) on your YAxisIs that what you want?