Left and right padding on CartesianGrid on ComposedChart

Hi everyone. I’m currently experiencing a weird margin on my CartesianGrid relative to my ComposedChart.

I’ve tried using margin={{left: -20, right: -20}} on all my components, but nothing seems to remove it.

This is my component:

     <ResponsiveContainer 
        className={this.props.className} 
        width="100%" 
        height={210}
      >
        <ComposedChart data={projectedData}>
          <XAxis 
            dataKey="name"
            padding={{ left: 0, right: 0 }}
            tickLine={false}
            axisLine={false}
            tick={{fontSize: '10px', marginTop: "8px"}}
            minTickGap={64}
          />
          <YAxis
            dataKey="projected"
            padding={{ left: 0, right: 0 }}
            tickLine={false}
            axisLine={false}
            tick={{fontSize: '10px'}}
            tickFormatter={(tick) => ((tick / 1000) + 'k')}
            minTickGap={50}
          />
          <CartesianGrid strokeDasharray="2 2" strokeWidth="0.5" stroke="white" />

          <Bar dataKey="realized" stackId="a" fill="transparent" />
          <Bar dataKey="diffToProjected" stackId="a" maxBarSize={8} />
          <Line type="linear" dataKey="projected" stroke="white" dot={false} />
          <Line type="linear" dataKey="realized" stroke="#263465" dot={false} />
        </ComposedChart>
      </ResponsiveContainer>

Any tips on how to remove this left/right margin?

[seryozhatebe]

scale = point for XAxis, works for me! <XAxis dataKey="name" scale="point" />

[noxalex]

On XAxis and YAxis you can use prop tick={{ dx: -25 }} dx to move labels by X axis and dy to move labels by Y axis, example:

<YAxis type=“number” ticks={[0, 25, 50, 75]} tickCount={4} tickSize={0} axisLine={false} tick={{ dx: -25 }} />