За последние пару лет у меня было около десятка проектов на Vue, где заказчик просил дашборд или блок аналитики - от BI-панели за 90 000 ₽ до простого виджета статистики в админке на React с вкраплениями Vue-компонентов. Первый вопрос в каждом таком проекте - какую библиотеку графиков брать. Chart.js визуализация закрывает большинство типовых задач быстро и с минимальным весом бандла, но как только нужны сложные интерактивные графики с зумом, аннотациями и live-обновлением данных, начинаешь смотреть в сторону ApexCharts. Разберу разницу на конкретных кейсах, с кодом для Vue 3 и Composition API.
Chart.js визуализация и ApexCharts: в чём разница на старте
Chart.js рисует графики на canvas. Это значит минимум DOM-узлов, быстрый рендер и вес библиотеки около 60 КБ в минифицированном виде. Для дашборда с парой линейных графиков и барчартов этого достаточно за глаза - я собирал такие панели для e‑commerce на WooCommerce, где нужно было показать динамику заказов и выручки по дням, без сложной интерактивности.
ApexCharts рендерит через SVG и сразу тащит зум, панорамирование, аннотации, экспорт в PNG/CSV и анимации из коробки. Библиотека весит больше - порядка 150-170 КБ с зависимостями, и это стоит учитывать, если бандл и так перегружен. Зато на графиках, где пользователь должен сам крутить период, приближать участок или сравнивать несколько серий с легендой-переключателем, ApexCharts экономит недели разработки - то, что в Chart.js пришлось бы собирать руками через плагины.
Когда разница ощущается на практике
На проекте с приёмом платежей через T‑Bank я делал дашборд с графиком транзакций за месяц - обычный line chart с подсветкой пиков. Chart.js справился за пару часов вместе с адаптацией под тему сайта. На другом проекте, где нужно было сравнивать статистику доставки по нескольким пунктам СДЭК с возможностью зума по датам и экспортом отчёта, я взял ApexCharts - там из коробки есть zoom-toolbar и экспорт, которые в Chart.js пришлось бы дописывать плагинами и тестировать отдельно.
Установка в Vue 3: vue-chartjs против vue3-apexcharts
Оба варианта ставятся в две команды и дают декларативный компонент вместо ручной работы с canvas или SVG.
npm install chart.js vue-chartjs
# или
npm install apexcharts vue3-apexchartsПример компонента на Chart.js через Composition API:
import { Line } from 'vue-chartjs'
import {
Chart as ChartJS,
CategoryScale,
LinearScale,
PointElement,
LineElement
} from 'chart.js'
ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement)
const chartData = {
labels: ['Пн', 'Вт', 'Ср', 'Чт', 'Пт'],
datasets: [{ label: 'Заказы', data: [12, 19, 8, 15, 22] }]
}Важный нюанс, на котором я терял время в первых проектах: Chart.js работает через tree-shaking модули, и если забыть зарегистрировать нужный элемент (шкалу, точку, линию) - график просто не отрисуется без единой ошибки в консоли. ApexCharts в этом плане проще для новичка: компонент <apexchart> принимает объект options и series, и всё работает сразу, без ручной регистрации модулей.
Производительность на больших массивах данных
На canvas Chart.js держит несколько тысяч точек без просадки - проверял на дашборде с логами обращений, где строил график на 5000+ точек за квартал, и график перерисовывался за доли секунды даже при ресайзе окна.
ApexCharts на больших сериях начинает тормозить раньше, потому что каждая точка - это SVG-элемент в DOM. На графике больше 2000-3000 точек с анимациями я уже замечал лаги при скролле страницы, особенно на слабых мобильных устройствах. Решение - включать animations.enabled: false и агрегировать данные перед отрисовкой (группировать по неделям вместо дней), но это дополнительная работа на стороне бэкенда или в слое подготовки данных, например через n8n, если аналитика собирается автоматически из нескольких источников.
Бесплатный материал
🎁 Полезный скрипт в подарок
Подпишитесь на Telegram - пришлю готовый скрипт по этой теме.
Без спама. Отписка в 1 клик.
Кастомизация и готовые типы графиков
Chart.js даёт базовый набор: линии, бары, круговые, радарные, пузырьковые графики. Кастомизация делается через опции и плагины - если нужен, например, градиентный фон под линией или кастомный тултип, пишешь код руками. Гибко, но требует времени на каждую мелочь.
ApexCharts закрывает больше сценариев из коробки: свечные графики (для финансовой аналитики), heatmap, radialBar для прогресс-индикаторов, timeline для Gantt-диаграмм. Если в проекте нужна нестандартная визуализация без написания плагина с нуля - это ощутимая экономия. У меня в библиотеке готовых скриптов лежат несколько заготовок под оба варианта - конфиги тем, адаптивные брейкпоинты и шаблоны тултипов, которые я переиспользую вместо того, чтобы каждый раз настраивать с нуля.
Тёмная тема и брендинг
Оба варианта поддерживают динамическую смену темы, но в ApexCharts это встроенный параметр theme.mode, а в Chart.js приходится вручную пересчитывать цвета осей, сетки и текста при переключении и вызывать chart.update(). На проектах с переключателем светлая/тёмная тема я обычно закладываю на это отдельно час-два, если библиотека - Chart.js.
Реактивность данных и Composition API во Vue
Oба пакета корректно реагируют на изменение пропсов, но с нюансами. У vue-chartjs при обновлении данных нужно либо менять ссылку на объект chartData целиком (Vue не всегда триггерит перерисовку при мутации вложенного массива), либо явно дёргать метод update через ref на компоненте.
const chartData = ref({ labels: [...], datasets: [...] })
function updateChart(newValues) {
chartData.value = {
...chartData.value,
datasets: [{ ...chartData.value.datasets[0], data: newValues }]
}
}vue3-apexcharts следит за изменением series и options напрямую и перерисовывает график без плясок с копированием объектов - это удобно, когда данные приходят по вебсокету или обновляются каждые несколько секунд, например в дашборде мониторинга заказов, куда данные подтягиваются из CRM через n8n-воркфлоу.
Что выбрать под конкретную задачу
| Задача | Рекомендация | Почему |
|---|---|---|
| Виджет статистики в админке (заказы, выручка WooCommerce) | Chart.js | Меньше вес, хватает базовых типов графиков |
| BI-дашборд с зумом, фильтрами по датам, экспортом отчёта | ApexCharts | Интерактив и экспорт из коробки |
| Графики с 3000+ точками данных, real-time лог событий | Chart.js | Canvas держит объём без просадки FPS |
| Финансовая аналитика, свечные графики, heatmap | ApexCharts | Готовые типы графиков без написания плагинов |
| Лендинг с одним простым графиком для презентации метрик | Chart.js | Минимальный вес страницы, быстрее LCP |
На рынке за разработку такого дашборда студии обычно просят от 100 000 до 250 000 ₽ в зависимости от числа графиков и интеграций с бэкендом - цена сильно скачет из-за времени на согласование дизайна и правки макетов. У меня разработка дашборда на Vue.js с графиками, фильтрами и адаптацией под мобильные стоит от 90 000 ₽, срок - от полутора до трёх недель в зависимости от числа экранов и сложности интеграции с API.
Интерфейс аналитики и отчётов
Дашборд / BI
от 90 000 ₽
Подробнее →Частые вопросы
Можно ли использовать Chart.js и ApexCharts в одном проекте?
Технически да - ничего не мешает подключить обе библиотеки, если на одной странице нужен простой барчарт и рядом сложный интерактивный график. На практике я так не делаю: две библиотеки для графиков увеличивают бандл вдвое и усложняют поддержку темы и стилей. Проще выбрать одну под доминирующий сценарий и для редких случаев дописать недостающую фичу поверх неё.
Какая библиотека быстрее грузится на мобильных
Chart.js за счёт меньшего веса и canvas-рендера обычно даёт более быстрый первый рендер и меньше нагружает CPU на слабых устройствах. ApexCharts на мобильных ощутимо тяжелее при большом числе точек или включённых анимациях - на такие случаи стоит закладывать отключение анимаций и агрегацию данных заранее.
Подходит ли ApexCharts для дашборда с real-time обновлением через вебсокет
Да, и это одна из сильных сторон библиотеки - метод обновления серии оптимизирован под частые изменения и умеет плавно анимировать переход между старыми и новыми значениями. Для очень частых обновлений (несколько раз в секунду) я всё равно рекомендую дебаунсить входящий поток данных на уровне компонента, иначе перерисовка SVG начинает съедать заметную часть CPU.
Нужна ли отдельная библиотека графиков, если данные уже визуализируются в Tilda-скрипте
Если речь про встраивание графика в лендинг на Tilda через кастомный скрипт, обе библиотеки подключаются через CDN без сборки на Vue - но тогда реактивность и Composition API не нужны, и логичнее взять Chart.js как более лёгкий вариант для статичной страницы. Для полноценного личного кабинета или админки с частым обновлением данных Vue-обёртка оправдана.