Как оцентровать тики в recharts?

Question

[b4rret]

Кто нибудь знает, как выровнять Тики в recharts? Есть AreaChart, убрал подписи по Y, вместе с этим исчез первый тик по X.

<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

[Петр Мухуров]

Нашел такой вариант

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/>}/>
...

дельту можно подобрать

Comments

[Петр Мухуров]

Как вариант, можно еще отрисовать на х - 1 больше тиков, скрыть половину и оставить только те, которые попадают между

[b4rret]

Сделал такой тик. Смещение тиков не зависит от ширины

class CustomizedAxisTick extends PureComponent {
  render() {
    const { x, y, payload, width, index, visibleTicksCount } = this.props
    const colWidth = width / visibleTicksCount
    const extra = index === 0 ? 0 : 16
    const delta = colWidth / 2 + extra 

    return (
      <g transform={`translate(${x},${y})`}>
        <text
          x={0}
          y={-14}
          textAnchor="end"
          fill="#9ca1b2"
          transform={`translate(${delta},0)`}
          fontFamily="monospace"
          fontSize="20"
        >
          {payload.value}
        </text>
      </g>
    )
  }
}

[Петр Мухуров]

b4rret, похоже на правду, но есть пару некрасивых вещей тык
1)

const textWidth =
    ($node.current.textLength && $node.current.textLength.baseVal.value) || 0;

я не знаю, как иначе забрать реальную ширину у
2) немного не хватает, чтобы прям идеально по центру было, но лень разбираться, чего не хватает, можно ручками подкинуть пару единиц к textWidth)