Padding issue for xAxis in recharts

Question

As i was working on recharts, i was trying to achieve below

Below is my code:

  <ResponsiveContainer width="100%" height={400} className="area-chart">
  <ComposedChart data={data} barSize={30}>
    <Area
      fillOpacity={0.85}
      dataKey="data"
      fill="#E3F4FF"
      stroke="#5E94B5"
      strokeDasharray={[6, 3]}
      strokeWidth={1} />
    <XAxis
      // tick={pr => <Tick {...pr} value={getValue(pr.payload.value)} />}
      tick={false}
      orientation="top"
      tickLine={false}
      axisLine={false}
      dataKey="name"
      width={500}
      padding={{left:20}}
      scale="point" />
    <YAxis
      axisLine={false}
      tickFormatter={tick => truncateValue(tick, 0)}
      tickLine={false} />
    <CartesianGrid strokeDasharray="3 3" vertical={false} />
    <Bar dataKey="data" fill="#5E94B5" style={{margin:20}} radius={[5, 5, 0, 0]} stackId="stack" />
    <Bar dataKey="diff" fill="#F1F2F3"   radius={[5, 5, 0, 0]} stackId="stack" />

    <Bar dataKey="data" fill="#5E94B5"   radius={[5, 5, 0, 0]} stackId="stacktwo" />
    <Bar dataKey="data" fill="#5E94B5"   radius={[5, 5, 0, 0]} stackId="stackthree" />
    <Bar dataKey="data" fill="#5E94B5"   radius={[5, 5, 0, 0]} stackId="stackfour" />




  </ComposedChart>
</ResponsiveContainer>

But the result of this is:

Is there any prop that i need to add to xAxis component of recharts or is there any way to achieve it?, because padding is keep on changing. Please let me know, Thanks in advance.