Recharts – популярная библиотека JavaScript для создания интерактивных и визуально привлекательных диаграмм. Когда дело доходит до настройки диаграмм, одним из распространенных требований является настройка меток по оси Y. В этой статье мы рассмотрим различные методы достижения такой настройки в Recharts, а также приведем примеры кода. Итак, приступим!

Метод 1: использование свойства форматирования
Recharts предоставляет свойство formatter, которое позволяет нам форматировать отметки меток по оси Y. Мы можем определить пользовательскую функцию и передать ее в свойство formatterдля преобразования значений тиков.

import { YAxis } from 'recharts';
// Custom formatter function
const formatYAxisTick = (value) => `$${value}`;
// Inside the chart component
<YAxis
  dataKey="yAxisDataKey"
  label={{ value: 'Y-Axis Label', angle: -90, position: 'insideLeft' }}
  tickFormatter={formatYAxisTick}
/>

Метод 2: использование свойства галочки.
Другой способ настроить метки меток по оси Y — использование реквизита tick. Этот реквизит позволяет нам предоставить пользовательский компонент React в качестве элемента галочки, что дает нам полный контроль над его внешним видом.

import { YAxis, Tick } from 'recharts';
// Custom Tick component
const CustomYAxisTick = ({ x, y, payload }) => (
  <Tick {...{ x, y, payload }} style={{ fill: 'red' }}>
    <text x={0} y={0} dy={16} textAnchor="end" transform="rotate(-45)">
      {payload.value}
    </text>
  </Tick>
);
// Inside the chart component
<YAxis
  dataKey="yAxisDataKey"
  label={{ value: 'Y-Axis Label', angle: -90, position: 'insideLeft' }}
  tick={<CustomYAxisTick />}
/>

Метод 3: использование свойства домена.
Свойство domainв Recharts позволяет нам установить диапазон значений, отображаемых по оси Y. Управляя свойством domain, мы можем управлять значениями и интервалами тиков.

import { YAxis } from 'recharts';
// Inside the chart component
<YAxis
  dataKey="yAxisDataKey"
  label={{ value: 'Y-Axis Label', angle: -90, position: 'insideLeft' }}
  domain={['dataMin', 'dataMax']}
// Adjust as needed
/>

Метод 4: использование интервала
Свойство intervalв Recharts определяет интервал между каждым тиком на оси Y. Установив собственное значение интервала, мы можем контролировать количество и интервал между тактами.

import { YAxis } from 'recharts';
// Inside the chart component
<YAxis
  dataKey="yAxisDataKey"
  label={{ value: 'Y-Axis Label', angle: -90, position: 'insideLeft' }}
  interval={2}
// Adjust as needed
/>

Настройка меток по оси Y в Recharts имеет решающее значение для создания визуально привлекательных и информативных диаграмм. В этой статье мы рассмотрели четыре различных метода достижения такой настройки. Используя реквизиты formatter, tick, domainи interval, мы можем легко адаптировать y Этикетка по оси соответствует нашим конкретным требованиям. Поэкспериментируйте с этими методами и выберите тот, который лучше всего соответствует вашим потребностям, чтобы создавать потрясающие визуализации с помощью Recharts.