Chart.js: как добавить графики и дашборд в своё приложение

Таблицы с цифрами полезны, когда нужны точные значения. Но человек плохо воспринимает динамику, глядя на столбцы чисел. График за секунду показывает, растут ли расходы, падает ли посещаемость, какой день был пиковым. Именно поэтому почти каждое приложение с аналитикой рано или поздно обрастает диаграммами.

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

Что такое Chart.js простыми словами

Chart.js — это JavaScript-библиотека, которая рисует графики на HTML-элементе <canvas>. Ты передаёшь ей массив данных и настройки: тип графика, цвета, подписи, легенду. Библиотека сама считает координаты, масштабы, отступы и отрисовывает изображение.

Хочешь нарисовать график доходов по месяцам — вместо того чтобы вручную считать высоту каждого столбца, рисовать линии и подписи осей, говоришь Chart.js: «Вот массив значений, вот метки месяцев, вот цвет столбцов». Библиотека делает всё остальное.

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

Зачем графики нужны в приложении вайбкодера

Когда ты собираешь приложение с ИИ, важно не просто сделать красивую картинку, а помочь пользователю принимать решения. Графики решают именно эту задачу.

Показать динамику

Если пользователь ведёт учёт финансов, ему важно видеть, как менялись расходы по месяцам. Таблица с 12 строками тоже даст ответ, но линия на графике сразу покажет тренд: рост, падение, сезонные пики. То же самое касается статистики по заказам в интернет-магазине, прогресса в игре, посещаемости блога. Про интернет-магазин с ИИ мы подробно разбирали в статье «Интернет-магазин с ИИ».

Сравнить категории

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

Показать доли

Круговой график хорош, когда нужно показать соотношение частей целого: распределение трафика по каналам, структура портфеля инвестиций, разбивка времени по задачам. Главное — не злоупотреблять круговыми диаграммами: если категорий больше пяти-шести, воспринимать их становится сложно.

Повысить вовлечённость

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

Чем Chart.js отличается от продуктовых метрик

В курсе мы уже разбирали продуктовые метрики: DAU, retention, churn, ARPU и другие. Эти метрики отвечают на вопрос: «Какие показатели важно отслеживать, чтобы понимать здоровье продукта?». Подробнее — в статье «Продуктовые метрики для начинающих».

Chart.js отвечает на другой вопрос: «Как технически нарисовать график по моим данным внутри приложения?». Это инструмент визуализации, а не методология аналитики.

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

Также Chart.js отличается от аналитических сервисов вроде Google Analytics или Яндекс Метрики. Эти сервисы собирают данные самостоятельно и показывают их в своём интерфейсе. Chart.js же рисует графики на основе данных, которые ты сам передаёшь из своей базы. Это даёт полный контроль над тем, что и как показывать.

Как это работает на практике

Процесс добавления графика в приложение можно разбить на несколько шагов.

1. Подключи библиотеку

Chart.js можно подключить несколькими способами: через CDN, npm или yarn. Для быстрого прототипа часто используют CDN — достаточно добавить одну строку в HTML. Для проектов с бандлером удобнее установить пакет через npm.

2. Подготовь данные

Данные для графика — это обычные массивы чисел и подписей. Например, для графика расходов по месяцам нужны два массива:

const labels = ['Янв', 'Фев', 'Мар', 'Апр', 'Май', 'Июн'];
const data = [12000, 15000, 13500, 18000, 16500, 21000];

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

3. Создай canvas-элемент

В HTML нужен элемент <canvas id="myChart"></canvas>. Chart.js будет рисовать график именно внутри него.

4. Настрой конфигурацию

Конфигурация Chart.js — это JavaScript-объект, в котором указаны тип графика, данные, цвета, подписи и другие параметры. Например:

const config = {
  type: 'bar',
  data: {
    labels: labels,
    datasets: [{
      label: 'Расходы по месяцам',
      data: data,
      backgroundColor: 'rgba(54, 162, 235, 0.5)',
      borderColor: 'rgba(54, 162, 235, 1)',
      borderWidth: 1
    }]
  },
  options: {
    responsive: true,
    scales: {
      y: { beginAtZero: true }
    }
  }
};

5. Инициализируй график

Последний шаг — создать объект Chart и связать его с canvas:

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, config);

После этого в браузере появится столбчатая диаграмма.

Как попросить ИИ-агента помочь

Вайбкодеру не нужно заучивать синтаксис Chart.js. Достаточно описать задачу на русском языке:

• Нарисуй линейный график доходов по неделям на Chart.js.
• Сделай круговую диаграмму распределения расходов по категориям.
• Добавь два набора данных на один график: доходы и расходы.
• Сделай так, чтобы график подстраивался под ширину экрана.
• Добавь подсказки при наведении на точки графика.

Чем конкретнее запрос, тем лучше. Укажи источник данных, тип графика, цвета и поведение при изменении размера экрана.

Chart.js vs Recharts: что выбрать для React

Если ты используешь React или Next.js, есть альтернатива — библиотека Recharts. Она построена на тех же принципах, что и Chart.js, но предлагает декларативный синтаксис в виде React-компонентов.

В Chart.js ты создаёшь объект конфигурации и передаёшь его в конструктор. В Recharts ты пишешь JSX-компоненты:

<LineChart data={data}>
  <XAxis dataKey="month" />
  <YAxis />
  <Line type="monotone" dataKey="amount" stroke="#8884d8" />
  <Tooltip />
</LineChart>

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

Когда достаточно простой таблицы вместо графика

Графики крутые, но не всегда нужные. Вот случаи, когда лучше обойтись таблицей.

Данных мало

Если нужно показать три цифры, график только усложнит восприятие. Таблица или даже обычный текст будут понятнее.

Важны точные значения

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

Нет динамики

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

Мобильный интерфейс

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

Доступность

Графики сложнее воспринимать пользователям с нарушениями зрения. Если аудитория предполагает таких пользователей, всегда предоставляй альтернативу в виде таблицы или текстового описания.

Ограничения Chart.js

Chart.js хорош для базовых задач, но у него есть пределы.

Производительность на больших данных

Если нужно отрисовывать тысячи точек на линейном графике, Chart.js может начать тормозить. В таких случаях приходится прибегать к оптимизации: уменьшать количество точек, группировать данные, использовать специализированные библиотеки вроде D3.js или решения для больших данных.

Кастомный дизайн

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

Зависимость от клиента

Chart.js рисует график в браузере пользователя. Если данные нужны на сервере — например, для PDF-отчёта или email-рассылки — придётся искать другие решения.

Честный вывод

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

Если проект на React или Next.js, стоит сразу присмотреться к Recharts. Он работает по тем же принципам, но лучше ложится в компонентную модель. Если данных много или дизайн нестандартный — придётся учить D3.js или нанимать специалиста.

Главное помнить: график — это не самоцель. Он должен отвечать на вопрос пользователя. Если таблица отвечает лучше, не гонись за красивой картинкой. А если график действительно нужен, Chart.js поможет сделать его быстро и без боли.

Подробнее о типах графиков

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

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

Линейный график лучше всего подходит для показа изменений во времени. Доходы по месяцам, посещаемость по дням, средний счёт игрока по неделям — всё это хорошо ложится на линию. Главное — не перегружать один график десятками линий: две-три линии воспринимаются комфортно, больше — начинается путаница.

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

Столбчатая диаграмма хороша для сравнения категорий. Например, выручка по товарам, количество заказов по городам, время выполнения задач по исполнителям. Столбцы можно группировать и накладывать друг на друга, если нужно показать несколько серий данных.

Круговая и кольцевая диаграммы

Эти типы показывают доли от целого. Круговая диаграмма подходит, когда категорий немного — две-три, максимум пять. Если категорий больше, кольцевая диаграмма с легендой справляется немного лучше, но и она не спасает при большом количестве мелких долей.

Радарная диаграмма

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

Интеграция с игрой «Змейка»

Учебный проект курса — браузерная игра «Змейка». Графики могут сделать игру интереснее, если добавить статистику для игрока.

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

Данные для графика могут храниться в localStorage прямо в браузере, пока проект не подключён к серверу. Это простой способ сделать дашборд без базы данных. Когда проект вырастет, статистику можно перенести в Supabase или другую базу.

Подготовка данных перед визуализацией

Перед тем как передать данные в Chart.js, их обычно нужно преобразовать. Исходные данные из базы редко бывают в идеальном формате.

Например, база может хранить список заказов с датами и суммами. Чтобы построить график доходов по месяцам, нужно сгруппировать заказы по месяцам и сложить суммы. Это можно сделать на сервере в запросе к базе данных или на клиенте в JavaScript.

ИИ-агент отлично справляется с такими преобразованиями, если чётко объяснить желаемый результат. Пример запроса:

• У меня есть массив заказов с полями date и amount. Сгруппируй их по месяцам и построй линейный график на Chart.js.

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

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

Chart.js позволяет менять цвета, шрифты, отступы, легенду, подсказки и оси. Это важно, чтобы график вписывался в дизайн приложения.

Основные настройки, которые чаще всего нужны:

• Цвета линий и столбцов.
• Толщина линий и радиус точек.
• Заголовок графика.
• Подписи осей.
• Формат чисел в подсказках.
• Поведение легенды: сверху, снизу, сбоку или скрыта.
• Адаптивность: как график ведёт себя при изменении размера экрана.

Не стоит увлекаться эффектами. График должен быть читаемым. Если визуал отвлекает от данных, значит, что-то пошло не так.

Интерактивность: подсказки и клики

Графики становятся интереснее, если реагируют на действия пользователя. Chart.js умеет показывать подсказки при наведении, подсвечивать элементы и обрабатывать клики.

Например, при клике на столбец месяца можно открыть подробный отчёт по этому месяцу. При наведении на точку линейного графика показывать точное значение и дату. Эти мелочи сильно повышают удобство.

Добавить интерактивность можно через обработчики событий в опциях графика. ИИ-агент легко реализует такие сценарии по описанию.

Responsive и мобильные устройства

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

Например, на узком экране легенду лучше перенести вниз или вовсе скрыть, а подписи осей повернуть. Если на графике много меток по оси X, они могут налезать друг на друга. В таких случаях помогает сокращение меток или поворот на 45 градусов.

Ошибки, которые часто совершают новички

• Неправильный тип графика. Круговая диаграмма для десятка категорий, линейный график для несвязанных категорий — всё это усложняет восприятие.
• Отсутствие подписей осей. Без подписей непонятно, что означают числа.
• Слишком много цветов. Если каждый столбец своего цвета, внимание рассеивается.
• Неотсортированные данные. Линейный график с датами вразброс не имеет смысла.
• Игнорирование мобильных устройств. График, который выглядит отлично на десктопе, может быть нечитаем на телефоне.
• Попытка показать всё на одном графике. Иногда лучше сделать два простых графика, чем один перегруженный.

Альтернативы Chart.js

Кроме Chart.js и Recharts существуют другие библиотеки:

• D3.js — самая мощная библиотека для кастомных визуализаций. Сложная в освоении, но позволяет нарисовать практически всё.
• Apache ECharts — богатая функциональностью библиотека с множеством типов графиков и хорошей производительностью.
• Plotly.js — подходит для научных и статистических визуализаций.
• Victory — ещё одна React-ориентированная библиотека.

Для вайбкодера, который только начинает, Chart.js или Recharts — оптимальный выбор. Они проще, быстрее подключаются и покрывают 90% задач.

Как построить простой дашборд

Дашборд — это страница с несколькими графиками, которая даёт обзор ключевых показателей. Для небольшого проекта дашборд может состоять из трёх-четырёх блоков:

• Крупное число с главной метрикой: общая выручка, количество пользователей, лучший рекорд.
• Линейный график динамики за последние 30 дней.
• Столбчатая диаграмма распределения по категориям.
• Круговая диаграмма долей, если категорий немного.

Каждый блок должен отвечать на конкретный вопрос. Не стоит кидать на дашборд всё подряд. Лучше меньше, но понятнее.

Важно соблюдать визуальную иерархию. Самый важный график — крупнее и выше. Вспомогательные метрики — поменьше. Цвета должны быть согласованы: например, синий для основных данных, серый для фона, красный для отрицательных отклонений.

Примеры конфигураций

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

{
  type: 'line',
  data: {
    labels: ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс'],
    datasets: [{
      label: 'Посещения',
      data: [120, 190, 150, 220, 280, 310, 290],
      borderColor: 'rgb(75, 192, 192)',
      tension: 0.3
    }]
  }
}

Круговая диаграмма

{
  type: 'pie',
  data: {
    labels: ['Еда', 'Транспорт', 'Развлечения', 'Прочее'],
    datasets: [{
      data: [45, 25, 20, 10],
      backgroundColor: ['#ff6384', '#36a2eb', '#ffce56', '#4bc0c0']
    }]
  }
}

Группированные столбцы

{
  type: 'bar',
  data: {
    labels: ['Янв', 'Фев', 'Мар'],
    datasets: [
      { label: 'Доход', data: [50, 60, 70], backgroundColor: '#36a2eb' },
      { label: 'Расход', data: [40, 55, 50], backgroundColor: '#ff6384' }
    ]
  }
}

Эти примеры можно сразу скормить ИИ-агенту и попросить адаптировать под свои данные.

Производительность и оптимизация

Если график тормозит, причины обычно одни из следующих:

• Слишком много точек. Попробуй сгруппировать данные по часам, дням или неделям.
• Тяжёлые анимации. Chart.js анимирует графики по умолчанию; на больших данных анимацию можно отключить.
• Частое обновление. Если данные меняются каждую секунду, постоянная перерисовка графика может нагружать процессор.
• Большое количество графиков на одной странице. Каждый canvas потребляет ресурсы.

Простые меры: уменьшить количество точек, отключить анимацию, обновлять график не чаще раза в минуту, удалять неиспользуемые экземпляры Chart.js при переходе между страницами.

Экспорт графиков

Иногда пользователю нужно сохранить график как картинку. Chart.js позволяет получить изображение canvas в формате PNG или JPEG одной строкой:

const image = myChart.toBase64Image();

После этого картинку можно вставить в отчёт, отправить по email или сохранить на устройство. Это удобно для финансовых и аналитических приложений.

Графики и бизнес-метрики

Графики помогают не только пользователям, но и тебе как создателю приложения. Визуализируя метрики, ты быстрее замечаешь аномалии: внезапный отток пользователей, рост ошибок, падение конверсии.

В курсе мы разбирали экономику приложений в статье «Юнит-экономика приложения». Графики — отличный способ отслеживать юнит-экономику в реальном времени: CAC, LTV, маржинальность и другие показатели.

Когда стоит нанимать дизайнера или аналитика

Для MVP и учебных проектов Chart.js и ИИ-агент покрывают большинство потребностей. Но если продукт вырастает и графики становятся центральной частью ценности, имеет смысл привлечь специалиста по данным или UX-дизайнера. Они помогут выбрать правильные метрики, избежать искажений в визуализации и сделать дашборд по-настоящему полезным.

Главное — не пытаться сделать идеальный дашборд на старте. Начни с одного-двух простых графиков, проверь, что они отвечают на реальные вопросы пользователей, и улучшай постепенно.

Реальное время и обновление данных

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

Обычно это делается так: приходит новое значение, оно добавляется в массив данных, и вызывается метод update() у объекта графика. При этом Chart.js перерисовывает только изменившиеся части.

Важно не обновлять график слишком часто. Если данные приходят каждую секунду, лучше обновлять раз в 5–10 секунд или агрегировать значения за интервал. Иначе браузер будет тратить ресурсы на постоянную перерисовку.

Тёмная тема и стилизация

Современные приложения часто поддерживают тёмную тему. Chart.js позволяет менять цвета текста, сетки, линий и фона через опции. Это значит, что один и тот же график может выглядеть аккуратно и в светлой, и в тёмной теме.

Чтобы не настраивать цвета вручную каждый раз, можно создать функцию, которая возвращает конфигурацию в зависимости от текущей темы. Или хранить цвета в дизайн-токенах и передавать их в Chart.js. ИИ-агент легко реализует переключение темы, если ты опишешь желаемое поведение.

Доступность графиков

Графики визуальны по своей природе, но это не значит, что они должны быть недоступны для пользователей с ограничениями зрения. Важные правила:

• Добавь к графику текстовое описание и альтернативную таблицу с данными.
• Используй цвета с достаточным контрастом.
• Не полагайся только на цвет: добавляй текстуры, подписи или линии разной толщины.
• Сделай интерактивные элементы доступными с клавиатуры, где это возможно.

Хорошая практика — выводить рядом с графиком краткое текстовое резюме: «Расходы выросли на 15% по сравнению с прошлым месяцем». Это помогает всем пользователям, не только тем, кто пользуется скринридером.

Тестирование графиков

Графики — тоже часть приложения, и их стоит проверять. В первую очередь убедись, что данные действительно попадают в график и что нет ошибок в консоли браузера.

Полезные проверки:

• График отображается на десктопе и на мобильном.
• При пустых данных показывается понятное сообщение, а не пустой canvas.
• Подсказки при наведении работают.
• Цвета и шрифты соответствуют дизайну.
• Данные отсортированы правильно.

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

Где взять вдохновение для дашбордов

Если не знаешь, как оформить графики, посмотри на аналитические сервисы, которыми пользуешься сам: Google Analytics, Яндекс Метрика, банковские приложения, фитнес-трекеры. Обрати внимание, какие типы графиков они используют, как расположены блоки, какие метрики показывают крупным шрифтом.

Не копируй бездумно, но используй хорошие решения как ориентир. Чем проще и понятнее дашборд, тем больше пользы он приносит.

Как объяснить ИИ-агенту, какой график нужен

Чтобы получить хороший результат с первого раза, формулируй задачу структурно:

• Что визуализируем: расходы по месяцам, распределение заказов по статусам, динамика рекордов.
• Тип графика: линия, столбцы, круг, радар.
• Источник данных: массив в коде, API, localStorage, база данных.
• Где отображается: страница дашборда, модальное окно, мобильная версия.
• Особенности: подсказки, легенда, адаптивность, тёмная тема, экспорт в PNG.

Такой бриф помогает агенту не угадывать, а сразу писать подходящий код.

Частые вопросы

Нужно ли знать JavaScript, чтобы использовать Chart.js?

Базовые знания JavaScript пригодятся, но заучивать API не обязательно. ИИ-ассистент может написать конфигурацию по твоему описанию. Главное — понимать, какие данные ты хочешь визуализировать.

Chart.js бесплатен?

Да, Chart.js распространяется под открытой лицензией и бесплатен для личных и коммерческих проектов. Некоторые расширения или плагины могут быть платными, но базовая библиотека бесплатна.

Можно ли использовать Chart.js в React?

Можно, но часто удобнее использовать Recharts — обёртку для React. Если хочешь именно Chart.js, есть обёртки вроде react-chartjs-2, которые адаптируют библиотеку под компоненты React.

Какие типы графиков поддерживает Chart.js?

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

Где взять данные для графика?

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

Стоит ли добавлять график, если данных мало?

Не всегда. Если нужно показать две-три цифры, график скорее усложнит восприятие. В таких случаях лучше таблица или крупные цифры.