Align bar horizontally on xAxis on recharts

Viewed 192

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?

0 Answers
Related