Настройка делений (ticks)

Оси и деления (ticks) в Chart.js определяют способ отображения числовых и категориальных значений на шкалах графика. Именно ticks отвечают за разметку оси, формирование подписей, интервалы между значениями и визуальную читаемость данных. Настройка этих параметров выполняется внутри конфигурации scales, отдельно для каждой оси (x, y, а также дополнительных шкал).

Каждая шкала в Chart.js содержит объект ticks, в котором задаются основные параметры отображения делений:

options: {
  scales: {
    y: {
      ticks: {
        display: true
      }
    }
  }
}

Ключевые свойства ticks влияют на:

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

Управление отображением значений

display

Определяет, будут ли видны подписи делений:

ticks: {
  display: false
}

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

color и font

Настройка внешнего вида подписей:

ticks: {
  color: '#666',
  font: {
    size: 12,
    family: 'Arial',
    weight: '500'
  }
}

Эти параметры не влияют на данные, но существенно меняют читаемость визуализации.

Контроль количества делений

maxTicksLimit

Ограничивает максимальное количество отображаемых делений:

ticks: {
  maxTicksLimit: 6
}

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

autoSkip

Автоматически скрывает часть меток:

ticks: {
  autoSkip: true
}

Механизм пропуска активируется при недостатке места. В сочетании с maxTicksLimit позволяет добиться стабильной читаемости на разных экранах.

autoSkipPadding

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

ticks: {
  autoSkipPadding: 10
}

Чем больше значение, тем реже отображаются подписи.

Шаг и диапазон значений

stepSize

Устанавливает фиксированный шаг между делениями:

ticks: {
  stepSize: 10
}

При использовании на числовых осях значения будут строиться с заданным интервалом: 0, 10, 20, 30 и так далее.

min и max (в контексте ticks)

Хотя обычно задаются в самой шкале, они напрямую влияют на ticks:

scales: {
  y: {
    min: 0,
    max: 100,
    ticks: {
      stepSize: 20
    }
  }
}

Фиксирование диапазона обеспечивает предсказуемую разметку.

precision

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

ticks: {
  precision: 2
}

Полезно при работе с дробными значениями, процентами и финансовыми данными.

Форматирование подписей

callback

Основной инструмент кастомизации отображаемого текста:

ticks: {
  callback: function(value) {
    return value + ' ₽';
  }
}

Функция получает исходное значение и возвращает строку, которая будет отображаться на оси.

Пример форматирования процентов:

ticks: {
  callback: function(value) {
    return value + '%';
  }
}

format (через Intl)

При сложном форматировании часто используется Intl.NumberFormat:

ticks: {
  callback: function(value) {
    return new Intl.NumberFormat('ru-RU').format(value);
  }
}

Это позволяет автоматически обрабатывать разделители тысяч и локализацию.

Управление источником значений

source

Определяет, откуда берутся значения для ticks:

  • "auto" — автоматически на основе данных
  • "data" — только из входных данных
  • "labels" — из массива меток
ticks: {
  source: 'data'
}

Использование labels особенно важно для категориальных осей.

Поворот и позиционирование подписей

minRotation и maxRotation

Контролируют угол наклона текста:

ticks: {
  minRotation: 0,
  maxRotation: 45
}

Это критично для длинных категорийных подписей на оси X.

align

Управляет выравниванием текста относительно делений:

ticks: {
  align: 'center'
}

Допустимые значения зависят от типа шкалы, но чаще всего используются start, center, end.

Кастомизация отображения сетки через ticks

Некоторые параметры ticks взаимодействуют с grid:

scales: {
  y: {
    ticks: {
      display: true
    },
    grid: {
      color: '#eee'
    }
  }
}

Хотя grid является отдельным объектом, логика отображения делений часто синхронизируется с ticks.

Категориальные шкалы и ticks

Для категориальных осей ticks строятся на основе массива labels:

data: {
  labels: ['Янв', 'Фев', 'Мар']
}

Настройки:

ticks: {
  autoSkip: true,
  maxRotation: 0
}

Особенность категориальных шкал — невозможность применения stepSize, так как значения не числовые.

Логарифмические шкалы

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

scales: {
  y: {
    type: 'logarithmic',
    ticks: {
      callback: function(value) {
        return '10^' + Math.log10(value);
      }
    }
  }
}

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

Продвинутые сценарии форматирования

динамическое скрытие значений

ticks: {
  callback: function(value, index) {
    return index % 2 === 0 ? value : '';
  }
}

Используется для ручного контроля плотности подписей.

условное форматирование

ticks: {
  callback: function(value) {
    if (value > 100) return value + ' ↑';
    return value;
  }
}

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

работа с временными шкалами

При использовании временных осей ticks часто форматируются через callback:

ticks: {
  callback: function(value) {
    const date = new Date(value);
    return date.toLocaleDateString('ru-RU');
  }
}

Влияние devicePixelRatio и адаптивности

Ticks автоматически пересчитываются при изменении размеров canvas. При высокой плотности пикселей (Retina-дисплеи) Chart.js масштабирует подписи, сохраняя читаемость, но при необходимости можно дополнительно управлять:

options: {
  responsive: true,
  maintainAspectRatio: false
}

Хотя эти параметры не относятся напрямую к ticks, они влияют на их визуальное распределение и плотность.

Оглавление