Chart.js: создание графиков в JavaScript

Что такое Chart.js?

Chart.js — это open-source JavaScript‑библиотека для визуализации данных, которая отрисовывает графики внутри HTML

Ключевые понятия (в 1 строке):

Canvas — HTML-элемент, на котором Chart.js рисует график.
labels — метки по X (категории или временные отметки).
datasets — наборы числовых значений для оси Y и их оформление.
options — дополнительные настройки внешнего вида и поведения.

Важно: Chart.js рендерит графики через canvas, поэтому при сложной интерактивности или огромных объёмах данных могут понадобиться более продвинутые решения (WebGL, специализированные библиотеки).

Начало работы: минимум файлов

Для примеров используем три файла: chart.html, plot.js и index.css. Вы можете назвать их иначе.

Вставьте подключение CDN в секцию head вашего HTML-файла:

Создайте canvas с ID и подключите CSS и JS:

Пример простого CSS (index.css):

body{
    background-color:#383735;
}

h1{
    color:#e9f0e9;
    margin-left:43%;
}
#plots{
    margin:auto;
    background-color:  #2e2d2d;
}

Стиль не обязателен — адаптируйте под вашу страницу.

ПК с графиками на экране

Линейный график

Чтобы создать линейный график, задайте type: ‘line’. Ниже — минимальный пример в plot.js.

// Получаем canvas по id
var plots = document.getElementById("plots");

// Пример данных для осей X и Y
var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"]; // Метки по X
var traffic = [65, 59, 80, 81, 56, 55, 60]; // Числовые значения по Y

// Создаём объект Chart:
new Chart(plots, {
  type: 'line', // Тип диаграммы
  data: {
    labels: months, // Данные для X
    datasets: [{
      data: traffic, // Данные для Y
      backgroundColor: '#5e440f',
      borderColor: 'white',
      fill: false // Заполнение под линией (true/false)
    }]
  },
});

Выход (пример результата):

Линейный график chart.js

Вы можете включить fill: true, добавить больше наборов данных или изменить цвета.

Настройка легенды и осей

Чтобы скрыть легенду или заставить ось Y начинаться с нуля, используйте options:

new Chart(plots, {
  type: 'line',
  data: {
    labels: months,
    datasets: [{
      data: traffic,
      backgroundColor: '#5e440f',
      borderColor: 'white',
      fill: false,
    }]
  },
  // Параметры кастомизации
  options: {
    legend: { display: false }, // Убирает легенду
    scales: {
      yAxes: [{ ticks: { min: 0 } }] // Ось Y начинается с 0
    }
  }
});

Выход (легенда скрыта):

Линейный график без легенды

Совет: для временных рядов используйте labels с датами и плагин для временных шкал (time scale) либо форматируйте подписи вручную.

Столбчатые диаграммы (bar)

Для столбчатой диаграммы просто укажите type: ‘bar’. Бар автоматически наследует backgroundColor.

new Chart(plots, {
  type: 'bar',
  data: {
    labels: months,
    datasets: [{
      data: traffic,
      backgroundColor: '#3bf70c', // Цвет столбцов
    }]
  },
  options: {
    legend: { display: false }
  }
});

Выход (пример):

Столбчатая диаграмма chart.js

Чтобы раскрасить каждый столбец по‑разному, передайте массив цветов, соответствующий длине данных:

new Chart(plots, {
  type: 'bar',
  data: {
    labels: months,
    datasets: [{
      data: traffic,
      // Цвет для каждого столбца
      backgroundColor: [
          "rgba(196, 190, 183)",
          "rgba(21, 227, 235)",
          "rgba(7, 150, 245)",
          "rgba(240, 5, 252)",
          "rgba(252, 5, 79)",
          "rgb(0,12,255)",
          "rgb(17, 252, 5)"
      ],
    }]
  },
  options: {
    legend: { display: false }
  }
});

Выход (разные цвета):

Столбцы с разными цветами

Круговая диаграмма (pie)

Для pie поменяйте type на ‘pie’ и, как правило, отображайте легенду, чтобы видеть соответствие сегментов:

new Chart(plots, {
  type: 'pie',
  data: {
    labels: months, // Каждому сегменту соответствует label
    datasets: [{
      data: traffic, // Размер сегмента
      backgroundColor: [
        "rgba(196, 190, 183)",
        "rgba(21, 227, 235)",
        "rgba(7, 150, 245)",
        "rgba(240, 5, 252)",
        "rgba(252, 5, 79)",
        "rgb(0,12,255)",
        "rgb(17, 252, 5)"
      ],
    }]
  },
  options: {
    legend: { display: true }
  }
});

Выход (пример):

Круговая диаграмма chart.js

Список поддерживаемых типов диаграмм

bar
line
scatter
doughnut
pie
radar
polarArea
bubble

Когда Chart.js не подходит

Очень большие наборы точек (тысячи/десятки тысяч): производительность canvas может заметно упасть.
Нужна продвинутая интерактивность на каждом объекте (сложные события на сотнях элементов) — лучше WebGL-решения.
Необходима векторная отрисовка (SVG) с глубоким доступом к DOM-элементам графиков — тогда удобнее D3.js.

Альтернативные подходы и библиотеки:

D3.js — для кастомных визуализаций и сложной логики.
Highcharts — коммерческая библиотека с расширенным функционалом.
Plotly — интерактивные графики, включая 3D и statistical charts.
ECharts — мощная библиотека от Apache для аналитических панелей.

Ментальная модель: как думать о Chart.js

Chart.js — это рендерер: вы даёте структуру (labels + datasets + options), он рисует.
Один объект Chart — одна визуализация; если нужны несколько графиков, создайте несколько canvas и Chart-инстансов.
Разделяйте данные и представление: генерируйте labels/datasets в коде, не плодите дублирование в шаблонах.

Мини‑методика: быстрый чек‑лист перед публикацией

Убедитесь, что canvas имеет явную ширину и высоту или responsive настройки.
Проверьте согласованность длины labels и данных (datasets[].data).
Настройте options.scales, если нужно фиксированное начало осей (например, min: 0).
Отключите анимацию на страницах с высокой нагрузкой (options.animation.duration = 0).
Тестируйте на мобильных устройствах (retina и разные плотности пикселей).
Если данные обновляются динамически, используйте chart.update() вместо пересоздания.

Критерии приёмки

Диаграмма отображается без JS‑ошибок в консоли.
Подписи по осям соответствуют данным и читаемы на целевых разрешениях.
При динамических обновлениях chart.update() корректно применяет новые значения.
Производительность при типичных объёмах данных на целевых устройствах приемлема.

Совместимость и миграция

В примерах используется Chart.js v2.8.0. В более новых версиях (v3+) API изменился: поля options, scales и плагины могли переименоваться. При миграции проверьте официальную миграционную документацию и тестируйте мелкие изменения.
Если вы используете пакетный менеджер (npm/yarn), подключайте chart.js как зависимость и контролируйте версию в package.json.

Роль‑ориентированные чек‑листы

Разработчик фронтенда:

Подключил Chart.js корректной версии.
Обеспечил responsive-контейнеры.
Использует chart.update() для динамики.

Дизайнер/UX:

Проверил читаемость лейблов и легенды.
Подобрал контрастные цвета и учитывает цветовую слепоту.

Продакт/Аналитик:

Подтвердил корректность данных и метрик.
Убедился, что выбран тип диаграммы соответствует цели (сравнение, тренд, доля).

1‑строчный глоссарий

Dataset — набор числовых значений и настроек, используемый Chart.js для отрисовки серии.
Legend — поясняющая панель, сопоставляющая цвет серии и её метку.
Fill — параметр, управляющий заливкой области под линией.

Примеры тестов / acceptance

При пустых данных labels/ datasets.length === 0 — график не ломается и выводит понятный placeholder или пустую область.
При обновлении данных методом chart.data.datasets[0].data = newData; chart.update(); — значения меняются без утечек памяти.

Заключение

Chart.js — быстрый способ добавить визуализации на страницу: простая модель данных, готовые типы графиков и гибкие опции. Для лёгких и средних по объёму приложений Chart.js часто оказывается наиболее удобным выбором. При необходимости высокой производительности или глубокой кастомизации рассмотрите альтернативы.

Краткое резюме:

Подключите Chart.js и canvas.
Передайте labels, datasets и options.
Используйте chart.update() для динамики и тестируйте производительность.

Дополнительно: социальный предпросмотр

OG title: Chart.js: создание графиков в JavaScript OG description: Быстрое руководство по созданию линейных, столбчатых и круговых диаграмм с примерами и чек-листом.