Когда нужен график

В таблице 12 чисел за 12 месяцев. Глаз их не сравнивает, а на графике тренд виден сразу. В браузере график можно нарисовать тремя способами: на <canvas>, в SVG или готовой библиотекой. Вручную можно, но оси, подписи, подсказки, анимация и ресайз - это много кода.

В этом уроке две библиотеки. Chart.js даёт готовые типы графиков и работает через конфигурацию. D3 готового графика не даёт: он даёт детали - шкалы, оси, data join, - а график вы собираете сами.

Конфигурация Chart.js превращается в график на canvas
Конфигурация Chart.js превращается в график на canvas

Chart.js: первый график

График рисуется на элементе <canvas>. Конфигурация состоит из трёх частей: type (тип графика), data (labels и datasets) и options. Установка: npm install chart.js.

html
<div style="position: relative; height: 320px">
  <canvas id="sales"></canvas>
</div>
javascript
import { Chart } from 'chart.js/auto';

const chart = new Chart(document.getElementById('sales'), {
  type: 'bar',
  data: {
    labels: ['Jan', 'Feb', 'Mar', 'Apr'],
    datasets: [{ label: 'Orders', data: [12, 19, 8, 15] }],
  },
  options: { responsive: true, maintainAspectRatio: false },
});

chart.js/auto регистрирует все типы и шкалы, поэтому для старта это удобнее всего. В продакшене, чтобы уменьшить бандл, подключайте только нужное: Chart.register(BarController, BarElement, CategoryScale, LinearScale, Tooltip, Legend).

💡 Кладите canvas в контейнер с position: relative и высотой. При responsive: true Chart.js берёт размер у родительского контейнера.

⚠️ Не задавайте размер canvas напрямую через CSS: при ресайзе график может стать размытым или неверного размера.

Datasets и options

Каждый dataset - одна серия: label, data и поля внешнего вида (borderColor, backgroundColor, tension). На одном графике может быть несколько серий, а у отдельной серии может быть свой type (например, линия поверх столбцов).