@b4rret

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

Кто нибудь знает, как выровнять Тики в 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>

5d5416eda6237002534209.png
  • Вопрос задан
  • 47 просмотров
Решения вопроса 1
pterodaktil
@pterodaktil
js developer
Нашел такой вариант
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/>}/>
...

дельту можно подобрать
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Ultimate Guitar Минск
от 1 000 до 5 000 usd.
Enapter Санкт-Петербург
от 180 000 до 240 000 руб.