'Align bar horizontally on xAxis on recharts

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?

reactjs recharts

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Align bar horizontally on xAxis on recharts

Sources

Related Questions