Ось X и ось Y: базовая конфигурация

В Chart.js координатные оси определяются через систему scales, которая управляет отображением данных на графике. Оси X и Y не являются отдельными сущностями в классическом смысле — они конфигурируются как масштабируемые шкалы с набором параметров, влияющих на разметку, форматирование значений, поведение сетки и связь с наборами данных.

Оси задаются внутри объекта конфигурации графика:

const config = {
  type: 'line',
  data: {
    labels: ['Янв', 'Фев', 'Мар', 'Апр'],
    datasets: [{
      label: 'Продажи',
      data: [10, 20, 15, 30]
    }]
  },
  options: {
    scales: {
      x: {},
      y: {}
    }
  }
};

Ключевой момент заключается в том, что x и y — это именованные шкалы, каждая из которых может быть настроена независимо.

Типы шкал для оси X и Y

Chart.js поддерживает несколько типов scales, и выбор типа определяет поведение оси.

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

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

x: {
  type: 'category'
}

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

  • значения берутся из labels
  • равномерное распределение точек
  • подходит для дискретных данных (месяцы, категории, группы)

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

Используется чаще для оси Y:

y: {
  type: 'linear'
}

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

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

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

x: {
  type: 'time'
}

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

  • требует адаптер даты (date adapter)
  • используется для временных рядов
  • поддерживает интервализацию (день, месяц, год)

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

y: {
  type: 'logarithmic'
}

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

  • подходит для экспоненциальных данных
  • нельзя использовать нулевые или отрицательные значения

Базовые параметры оси

min и max

Жёстко задают границы оси:

y: {
  min: 0,
  max: 100
}

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

beginAtZero

y: {
  beginAtZero: true
}

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

suggestedMin и suggestedMax

Альтернатива жёстким границам:

y: {
  suggestedMin: 0,
  suggestedMax: 100
}

Chart.js может расширить диапазон при необходимости, сохраняя гибкость масштабирования.

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

Ось можно перемещать:

y: {
  position: 'left'
}

Для X:

x: {
  position: 'bottom'
}

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

  • top
  • bottom
  • left
  • right

Настройка тиков (ticks)

Тики управляют отображаемыми значениями на осях.

stepSize

y: {
  ticks: {
    stepSize: 10
  }
}

Фиксированный шаг между значениями.

maxTicksLimit

x: {
  ticks: {
    maxTicksLimit: 5
  }
}

Ограничивает количество отображаемых меток.

callback для форматирования

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

Позволяет преобразовывать отображаемые значения без изменения данных.

Сетка (grid)

Сетка тесно связана с осями и определяет визуальную структуру графика.

x: {
  grid: {
    display: true
  }
}

Основные параметры:

  • display — включение/выключение сетки
  • color — цвет линий
  • lineWidth — толщина
  • drawBorder — отображение границы оси

Настройка заголовков осей

y: {
  title: {
    display: true,
    text: 'Доход'
  }
}

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

Работа с несколькими осями Y

Chart.js позволяет создавать несколько вертикальных осей, каждая из которых может быть привязана к своему dataset.

const config = {
  data: {
    datasets: [
      {
        label: 'Продажи',
        data: [10, 20, 30],
        yAxisID: 'y'
      },
      {
        label: 'Прибыль',
        data: [5, 15, 25],
        yAxisID: 'y1'
      }
    ]
  },
  options: {
    scales: {
      y: {
        type: 'linear',
        position: 'left'
      },
      y1: {
        type: 'linear',
        position: 'right',
        grid: {
          drawOnChartArea: false
        }
      }
    }
  }
};

Ключевой принцип — связывание данных через yAxisID.

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

offset

x: {
  offset: true
}

Смещает категории, улучшая визуальное выравнивание столбцов.

bounds

x: {
  bounds: 'ticks'
}

Определяет, как ось привязывается к тикам или данным.

grace

y: {
  grace: '10%'
}

Добавляет отступ к диапазону, предотвращая «прилипание» графика к границам.

Инверсия осей

y: {
  reverse: true
}

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

Стековые оси (stacked charts)

scales: {
  x: {
    stacked: true
  },
  y: {
    stacked: true
  }
}

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

Форматирование категорий и кастомных значений X

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

data: {
  labels: ['Q1', 'Q2', 'Q3', 'Q4']
}

Для более сложных случаев используется парсинг объектов:

data: {
  datasets: [{
    data: [
      {x: '2024-01-01', y: 10},
      {x: '2024-01-02', y: 20}
    ]
  }]
}

В этом случае ось X должна быть временной или линейной в зависимости от формата.

Связь осей с dataset

Каждый dataset может явно указывать, к каким осям он привязан:

{
  data: [1, 2, 3],
  xAxisID: 'x',
  yAxisID: 'y'
}

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

Поведение при отсутствии данных

Если значения выходят за пределы шкалы:

  • при suggestedMin/Max Chart.js автоматически расширяет диапазон
  • при min/max значения обрезаются логически, но не визуально фильтруются
  • при grace добавляется дополнительное пространство

Итоговые принципы настройки осей

Базовая конфигурация осей в Chart.js строится вокруг трёх уровней управления:

  • тип шкалы (category, linear, time, logarithmic)
  • диапазон и поведение (min, max, suggestedMin, beginAtZero, grace)
  • визуализация (ticks, grid, title, position)

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

Оглавление