Настройка осей: axisTop, axisBottom, axisLeft, axisRight

В библиотеке визуализации данных Nivo оси являются базовым механизмом привязки числовых и категориальных данных к визуальному пространству. Компоненты axisTop, axisBottom, axisLeft, axisRight используются для точной настройки отображения шкал, подписей, сетки и вспомогательной информации на графиках.

Каждая ось в Nivo представляет собой конфигурационный объект, который передаётся в компонент графика (например, ResponsiveBar, ResponsiveLine, ResponsiveScatterPlot). Несмотря на внешнюю простоту, система осей обладает высокой гибкостью и позволяет управлять как визуальной частью, так и форматированием значений.

Базовая концепция осей

В Nivo используется четырёхсторонняя модель:

  • axisBottom — нижняя горизонтальная ось
  • axisTop — верхняя горизонтальная ось
  • axisLeft — левая вертикальная ось
  • axisRight — правая вертикальная ось

Каждая ось может быть включена или отключена независимо. Это позволяет строить как классические графики с одной осью X и Y, так и более сложные визуализации с дублирующими шкалами.

Общая структура конфигурации оси

Типовая конфигурация оси выглядит следующим образом:

axisBottom: {
    tickSize: 5,
    tickPadding: 5,
    tickRotation: 0,
    legend: 'X Axis',
    legendPosition: 'middle',
    legendOffset: 32
}

Ключевые параметры:

tickSize — длина засечек на оси tickPadding — отступ между засечкой и подписью tickRotation — угол поворота текста legend — подпись всей оси legendPosition — позиционирование подписи legendOffset — смещение легенды от оси

Эти параметры применимы ко всем четырём типам осей.

axisBottom: нижняя ось (X-axis)

Нижняя ось чаще всего используется для отображения категорий, временных меток или дискретных значений.

Пример конфигурации

axisBottom: {
    tickSize: 5,
    tickPadding: 10,
    tickRotation: 45,
    legend: 'Дата',
    legendPosition: 'middle',
    legendOffset: 40
}

Особенности поведения

  • чаще всего отображает категориальные данные
  • при работе с временными рядами может использовать форматирование даты
  • при большом количестве значений требуется поворот подписей

Форматирование значений

Для кастомизации текста используется format:

axisBottom: {
    format: value => value.slice(0, 3)
}

Это особенно полезно при работе с длинными строками или датами.

axisLeft: левая ось (Y-axis)

Левая ось является основной шкалой для числовых значений.

Пример конфигурации

axisLeft: {
    tickSize: 5,
    tickPadding: 10,
    tickRotation: 0,
    legend: 'Значение',
    legendPosition: 'middle',
    legendOffset: -50
}

Ключевые особенности

  • используется как основная числовая шкала
  • поддерживает форматирование чисел
  • часто используется для отображения процентов, валют или метрик

Форматирование чисел

axisLeft: {
    format: value => `${value}%`
}

Или с округлением:

axisLeft: {
    format: value => Math.round(value)
}

axisTop: верхняя ось

Верхняя ось используется реже, но играет важную роль в аналитических и сравнительных графиках.

Пример конфигурации

axisTop: {
    tickSize: 5,
    tickPadding: 10,
    tickRotation: 0,
    legend: 'Верхняя шкала',
    legendPosition: 'middle',
    legendOffset: -30
}

Сценарии применения

  • дублирование нижней оси
  • отображение альтернативной шкалы
  • сравнение двух метрик на одном графике

Особенности

  • может полностью повторять axisBottom
  • часто отключается в простых визуализациях
  • полезна в комбинированных графиках

axisRight: правая ось

Правая ось применяется для вторичной шкалы значений.

Пример конфигурации

axisRight: {
    tickSize: 5,
    tickPadding: 10,
    tickRotation: 0,
    legend: 'Вторая метрика',
    legendPosition: 'middle',
    legendOffset: 50
}

Использование

  • отображение второй числовой шкалы
  • сравнение разных единиц измерения
  • комбинированные графики (например, линия + столбцы)

Важный аспект

При использовании axisRight необходимо учитывать:

  • различие масштабов данных
  • необходимость визуального разделения серий
  • корректное форматирование значений

Синхронизация осей

При использовании нескольких осей важно учитывать согласование масштабов.

Пример комбинированной логики:

  • axisLeft — температура (°C)
  • axisRight — влажность (%)

Конфигурация:

axisLeft: {
    format: v => `${v}°C`
},
axisRight: {
    format: v => `${v}%`
}

Несоответствие масштабов может приводить к визуальным искажениям восприятия данных.

Управление отображением подписей

Каждая ось поддерживает гибкую настройку текста.

Поворот текста

axisBottom: {
    tickRotation: 30
}

Используется при:

  • длинных категориях
  • плотной сетке значений

Отступы

axisLeft: {
    tickPadding: 15
}

Увеличение отступа улучшает читаемость при длинных подписях.

Легенды осей

Легенда задаёт смысл оси.

legend: 'Продажи'

Позиционирование:

  • middle — центр оси
  • start — начало
  • end — конец

Смещение регулируется через:

legendOffset: 40

Отрицательные значения используются для вертикальных осей, чтобы вывести текст наружу графика.

Отключение осей

Любую ось можно полностью скрыть:

axisTop: null,
axisRight: null

Или:

axisBottom: {
    tickSize: 0,
    tickPadding: 0,
    tickValues: []
}

Отключение осей часто применяется в:

  • минималистичных дашбордах
  • sparkline-графиках
  • декоративных визуализациях

Управление значениями засечек

Параметр tickValues позволяет явно задать значения:

axisBottom: {
    tickValues: ['Jan', 'Feb', 'Mar']
}

Для числовых шкал:

axisLeft: {
    tickValues: 5
}

или диапазон:

axisLeft: {
    tickValues: [0, 50, 100]
}

Форматирование через функции

Функции форматирования позволяют адаптировать вывод под любые требования:

axisLeft: {
    format: value => `${value.toFixed(2)} ₽`
}

или динамическое преобразование:

axisBottom: {
    format: value => new Date(value).getFullYear()
}

Это особенно важно при работе с временными данными и финансовыми метриками.

Поведение при переполнении данных

При большом количестве значений оси автоматически перегружаются:

  • сокращается количество tick’ов
  • скрываются отдельные подписи
  • применяется автоматический шаг

Ручное управление:

axisBottom: {
    tickValues: 'every 2'
}

Комбинирование четырёх осей

Одновременное использование всех осей:

axisBottom: { legend: 'X' },
axisTop: { legend: 'X copy' },
axisLeft: { legend: 'Y' },
axisRight: { legend: 'Y secondary' }

Такая конфигурация применяется в аналитических интерфейсах, где требуется максимальная информативность.

Влияние осей на компоновку графика

Каждая активная ось влияет на внутренние отступы графика:

  • левая ось увеличивает padding слева
  • правая ось увеличивает padding справа
  • верхняя ось влияет на верхний отступ
  • нижняя ось влияет на нижний отступ

Это важно учитывать при встраивании графиков в ограниченные контейнеры.

Взаимодействие осей с типами графиков

Разные компоненты Nivo по-разному используют оси:

  • ResponsiveBar — категории + значения
  • ResponsiveLine — непрерывные шкалы
  • ResponsiveScatterPlot — обе оси числовые

Каждый тип графика требует индивидуальной настройки axis* для корректного отображения данных.

Оглавление