Тики: количество, значения, размер, цвет

В библиотеке Nivo оси и тики являются одной из ключевых частей системы визуализации данных. Именно через них формируется восприятие масштаба, распределения значений и структуры графика. Настройка тиков затрагивает четыре основных аспекта: количество отображаемых делений, конкретные значения, геометрию (размеры линий и отступов) и визуальное оформление (цвет и стилизация).

Количество тиков: автоматическое и управляемое формирование

Количество тиков на осях в Nivo может определяться автоматически или задаваться явно.

Автоматическое распределение

В большинстве компонентов (например, ResponsiveLine, ResponsiveBar) количество тиков рассчитывается автоматически на основе:

  • диапазона данных;
  • доступного пространства;
  • выбранного формата оси.

Автоматическое поведение используется по умолчанию и обеспечивает читаемость графика без дополнительных настроек.

Пример:

<ResponsiveLine
  data={data}
  margin={{ top: 50, right: 110, bottom: 50, left: 60 }}
  axisBottom={{
    tickSize: 5,
    tickPadding: 5,
    tickRotation: 0
  }}
/>

В этом случае Nivo сам определяет количество тиков по оси X.

Управление через tickCount

Параметр tickCount задаёт ориентировочное число тиков:

axisBottom={{
  tickCount: 8
}}

Особенности:

  • значение не является строгим ограничением;
  • библиотека может отклониться от него ради читаемости;
  • особенно полезно на временных или непрерывных шкалах.

Явное управление через tickValues

Наиболее точный способ управления количеством — указание конкретных значений:

axisBottom={{
  tickValues: [0, 20, 40, 60, 80, 100]
}}

Или для дат:

axisBottom={{
  tickValues: [
    '2023-01-01',
    '2023-02-01',
    '2023-03-01'
  ]
}}

Использование tickValues полностью отключает автоматическую генерацию и фиксирует структуру оси.

Значения тиков: типы и стратегии задания

Значения тиков в Nivo могут быть числовыми, строковыми или временными.

Числовые значения

Наиболее распространённый случай:

axisLeft={{
  tickValues: [0, 10, 20, 30, 40]
}}

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

Строковые значения

Применяются для категориальных данных:

axisBottom={{
  tickValues: ['A', 'B', 'C', 'D']
}}

Часто используется в bar charts, где каждая категория имеет фиксированное имя.

Дата и время

Nivo поддерживает работу с временными шкалами через строки дат или объекты Date:

axisBottom={{
  tickValues: [
    new Date(2024, 0, 1),
    new Date(2024, 1, 1),
    new Date(2024, 2, 1)
  ]
}}

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

  • формат отображения (format);
  • плотность тиков;
  • поведение масштабирования.

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

Параметр format позволяет преобразовать отображаемое значение:

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

Для дат:

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

Форматирование не влияет на вычисления, только на отображение.

Размер тиков: геометрия и визуальная плотность

Размер тиков управляется несколькими параметрами: длиной линии, отступами и углом поворота.

tickSize

Определяет длину линии тика:

axisLeft={{
  tickSize: 8
}}
  • малые значения делают ось компактной;
  • большие усиливают визуальное разделение шкалы.

tickPadding

Определяет расстояние между линией тика и подписью:

axisBottom={{
  tickSize: 5,
  tickPadding: 12
}}

Большие значения полезны при:

  • длинных подписях;
  • наклонённом тексте;
  • плотных графиках.

tickRotation

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

axisBottom={{
  tickRotation: 45
}}

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

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

Комбинация параметров плотности

Типичная конфигурация для компактного графика:

axisBottom={{
  tickSize: 4,
  tickPadding: 8,
  tickRotation: 30
}}

Такая настройка уменьшает визуальный шум и предотвращает наложение текста.

Цвет тиков: стилизация через theme и axis

В Nivo цвет тиков не задаётся отдельным параметром напрямую в axis-конфигурации (в большинстве компонентов). Вместо этого используется система theme.

Основная структура theme

theme={{
  axis: {
    ticks: {
      text: {
        fill: '#333333'
      },
      line: {
        stroke: '#999999',
        strokeWidth: 1
      }
    }
  }
}}

Цвет текста тиков

Определяется через:

theme={{
  axis: {
    ticks: {
      text: {
        fill: '#1f2937'
      }
    }
  }
}}

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

  • светлых/тёмных тем интерфейса;
  • повышения контрастности;
  • соответствия дизайн-системе.

Цвет линий тиков

Линии тиков управляются отдельно:

theme={{
  axis: {
    ticks: {
      line: {
        stroke: '#e5e7eb',
        strokeWidth: 1
      }
    }
  }
}}

Изменение цвета линий особенно важно при:

  • минималистичных графиках;
  • высоком уровне детализации;
  • работе с сеткой и grid lines.

Контраст между осями и фоном

При выборе цвета тиков учитывается фон графика:

  • светлый фон → тёмные тики;
  • тёмный фон → светлые тики;
  • насыщенные графики → приглушённые оси.

Пример тёмной темы:

theme={{
  axis: {
    ticks: {
      text: {
        fill: '#f9fafb'
      },
      line: {
        stroke: '#6b7280'
      }
    }
  }
}}

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

Настройка тиков представляет собой систему взаимосвязанных параметров:

  • tickValues задаёт структуру;
  • tickCount регулирует плотность при автоматическом режиме;
  • tickSize влияет на визуальную иерархию;
  • tickPadding определяет читаемость подписей;
  • tickRotation решает проблему перегруженности;
  • theme формирует визуальный стиль.

При конфликте параметров приоритет имеет явное определение значений через tickValues, затем tickCount, и только после этого автоматическая генерация.

Поведение в различных типах графиков

Линейные графики (ResponsiveLine)

  • критична точность значений;
  • часто используются временные оси;
  • рекомендуется ограничивать количество тиков.

Столбчатые графики (ResponsiveBar)

  • чаще используются категориальные тики;
  • важна читаемость подписей;
  • rotation применяется регулярно.

Круговые и радиальные графики

Оси отсутствуют, но аналогичные принципы применяются к сегментам и меткам.

Типовые паттерны настройки

Минималистичный график

axisLeft={{
  tickSize: 0,
  tickPadding: 10
}}

Детализированный аналитический график

axisLeft={{
  tickCount: 10,
  tickSize: 6,
  tickPadding: 8
}}

Категориальный график с длинными подписями

axisBottom={{
  tickValues: ['Очень длинное название 1', 'Название 2', 'Название 3'],
  tickRotation: 45,
  tickPadding: 12
}}

Временной ряд

axisBottom={{
  format: value => new Date(value).toLocaleDateString(),
  tickValues: 'every 1 month',
  tickRotation: 0
}}
Оглавление