I have a Recharts Bar chart with a single bar, code below:
<ResponsiveContainer width="100%" height={300}>
<BarChart data={exampleDataset}
margin={{
top: 20,
right: 10,
left: 20,
bottom: 0,
}}>
<CartesianGrid vertical={false} strokeDasharray="5" />
<XAxis dataKey="name">
</XAxis>
<YAxis tickSize={10} tickCount={8}
minTickGap={2}
>
</YAxis>
<Tooltip formatter={(value: any) => `${value} €`}/>
<Bar dataKey="value" barSize={45} fill='#b7b8d4'>
</Bar>
</BarChart>
</ResponsiveContainer>
By default the single bar is aligned to the center horizontally, I want it instead to be aligned to the left(the start of the chart).
The only way possible that I found to somewhat achieve this by setting the padding={{left: some negative number}} prop to XAxis component, but it requires hardcoding values, which makes it unusable for my purposes.
Is there any other way that would be dynamic?