Минимум, максимум и шаг делений

В Chart.js диапазон значений осей задаётся через конфигурацию масштабов (scales). Для числовых шкал ключевыми параметрами выступают минимум (min), максимум (max) и шаг делений (stepSize). Эти настройки определяют, какие значения попадут в область видимости графика, и как именно будут формироваться деления (ticks) на осях.

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

Типы шкал и применимость ограничений

Настройки min, max и stepSize применимы не ко всем типам шкал одинаково.

Линейная шкала (linear)

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

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

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

Логарифмическая шкала (logarithmic)

  • min и max применимы
  • stepSize не используется напрямую
  • деления вычисляются логарифмически

Категориальная шкала (category)

  • min/max не задаются как числовые границы
  • stepSize не применяется
  • ось строится по индексам категорий

Временная шкала (time)

  • min/max задаются датами
  • шаг регулируется через time.unit и time.stepSize

Минимальное и максимальное значение оси

Явное задание границ

В линейной шкале можно зафиксировать диапазон:

const config = {
  type: 'line',
  data: {
    labels: ['A', 'B', 'C', 'D'],
    datasets: [{
      label: 'Продажи',
      data: [12, 19, 7, 25]
    }]
  },
  options: {
    scales: {
      y: {
        min: 0,
        max: 30
      }
    }
  }
};

Здесь ось Y всегда будет отображать значения от 0 до 30 независимо от данных.

Автоматический диапазон

Если min и max не заданы, Chart.js вычисляет границы автоматически на основе набора данных.

Особенности автоматического режима:

  • добавляется небольшой отступ сверху и снизу
  • округление границ до “красивых” значений
  • учёт всех dataset’ов на одной оси

suggestedMin и suggestedMax

Параметры suggestedMin и suggestedMax влияют на автоматический расчёт, но не фиксируют границы жёстко.

scales: {
  y: {
    suggestedMin: 0,
    suggestedMax: 100
  }
}

Логика работы:

  • если данные выходят за пределы suggestedMin/max — ось расширяется
  • если данные внутри диапазона — используется предложенный диапазон
  • используется как мягкая настройка для “ожидаемой области значений”

beginAtZero

Частный случай управления минимумом:

scales: {
  y: {
    beginAtZero: true
  }
}

Поведение:

  • если минимальное значение данных > 0 — ось всё равно начнётся с 0
  • удобно для диаграмм, где важна визуальная база сравнения

Деления оси и шаг (stepSize)

Базовое управление шагом

stepSize задаёт фиксированный интервал между делениями:

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

Результат:

  • деления: 0, 20, 40, 60, 80, 100
  • равномерная сетка
  • предсказуемая визуализация

Влияние stepSize на автоматический расчёт

Если задан stepSize, Chart.js:

  • игнорирует попытки автоматически подобрать “красивые” интервалы
  • жёстко фиксирует шаг
  • может расширить max для кратности шагу

Пример:

  • max = 95
  • stepSize = 20 → фактическая шкала может стать 0–100

Ограничения stepSize

stepSize корректно работает только при:

  • linear шкале
  • положительных или равномерных числах

Не применяется:

  • category шкала
  • logarithmic шкала
  • сложные time unit настройки

Автоматический шаг и поведение ticks

Если stepSize не задан, Chart.js использует алгоритм подбора делений.

Основные факторы:

  • диапазон значений
  • размер графика
  • maxTicksLimit
  • precision округления

maxTicksLimit

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

scales: {
  y: {
    ticks: {
      maxTicksLimit: 6
    }
  }
}

Поведение:

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

precision

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

ticks: {
  precision: 0
}

Значения:

  • 0 — только целые числа
  • 1 — один знак после запятой
  • и т.д.

Комбинирование min, max и stepSize

Жёсткая фиксация шкалы

scales: {
  y: {
    min: 0,
    max: 50,
    ticks: {
      stepSize: 10
    }
  }
}

Поведение:

  • ось строго 0–50
  • шаг фиксирован
  • визуальная сетка стабильна при любых данных

Частичная фиксация

scales: {
  y: {
    min: 0,
    ticks: {
      stepSize: 5
    }
  }
}

Поведение:

  • максимум определяется автоматически
  • минимум фиксирован
  • шаг сохраняется

Полностью динамическая шкала

scales: {
  y: {
    ticks: {
      maxTicksLimit: 8
    }
  }
}

Поведение:

  • min/max вычисляются автоматически
  • шаг адаптивный
  • деления оптимизируются под размер графика

Границы и поведение при нескольких dataset

При наличии нескольких наборов данных на одной оси:

  • min/max вычисляются по всему объединённому набору
  • stepSize применяется ко всей оси целиком
  • переполнение одного dataset влияет на всю шкалу

Пример:

datasets: [
  { data: [10, 20, 30] },
  { data: [5, 200] }
]

→ ось будет расширена до значения 200

Grace (запас диапазона)

Дополнительный механизм расширения области:

scales: {
  y: {
    grace: '10%'
  }
}

Поведение:

  • добавляет отступ сверху и снизу
  • не меняет реальные min/max данных
  • улучшает визуальное восприятие пиков

Допустимые значения:

  • проценты ('10%')
  • числа (10)

Влияние stacked графиков

Для stacked диаграмм:

  • min обычно остаётся 0
  • max вычисляется по сумме значений
  • stepSize применяется к итоговой суммарной шкале

Это важно для stacked bar:

  • отдельные значения не влияют напрямую на верхнюю границу
  • учитывается сумма всех слоёв

Поведение при отрицательных значениях

Если данные содержат отрицательные числа:

  • min может стать отрицательным автоматически
  • stepSize сохраняет равномерность
  • ось пересекает ноль

Пример:

data: [-10, 5, 20]

→ шкала: примерно -10 до 20 (с округлением)

Практика управления читаемостью

При работе с диапазонами важны не только вычисления, но и визуальная логика:

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

Поведение при resize и responsive режиме

Chart.js пересчитывает ticks при:

  • изменении размера контейнера
  • смене ориентации
  • обновлении данных

При этом:

  • stepSize может пересчитываться (если не зафиксирован)
  • min/max остаются стабильными, если заданы явно
  • auto-scale адаптируется под новую геометрию
Оглавление