How to center ticks in recharts?

Question

Frontend

Does anyone know how to align Tiki in recharts? There is an AreaChart, I removed the labels for Y, along with this, the first tick for X disappeared.

<ResponsiveContainer width="100%" height={695}>
          <AreaChart data={this.data}>
            <defs>
              <linearGradient id="colorUv" x1="0" y1="0" x2="0" y2="1">
                <stop offset="5%" stopColor="#2196f3" stopOpacity={1} />
                <stop offset="95%" stopColor="#2196f3" stopOpacity={0} />
              </linearGradient>
            </defs>
            <CartesianGrid
              strokeDasharray="3 3"
              horizontal={false}
              strokeDasharray={0}
              stroke="rgba(158, 163, 180, 0.302)"
            />
            <Tooltip />
            <XAxis dataKey="day" axisLine={false} tick={{fill: '#9ca1b2'}} mirror={true} offset={0} />
            <Area
              type="monotone"
              dataKey="uv"
              stroke="#2196f3"
              strokeWidth={4}
              fillOpacity={0.3}
              fill="url(#colorUv)"
            />
          </AreaChart>
        </ResponsiveContainer>

Answer 1

Found this option.

const CustomizedAxisTick = ({ x, y, stroke, payload }) => (
  <g transform={`translate(${x + delta},${y})`}>
    <text x={0} y={0} dy={16} textAnchor="start" fill="#666">{payload.value}</text>
  </g>
);
...
<XAxis dataKey="name" height={60} tick={<CustomizedAxisTick/>}/>
...

delta can be selected