Charts.css: Создание графиков с помощью чистого CSS

Большинство frontend-разработчиков инстинктивно обращаются к Chart.js или D3.js, когда дизайн требует визуализации данных. Это разумный выбор по умолчанию — до тех пор, пока вы не начинаете загружать сотни килобайт JavaScript только для того, чтобы отобразить столбчатую диаграмму на странице документации или простой панели управления. Charts.css предлагает другой компромисс: визуализация данных на чистом CSS, построенная на семантических HTML-таблицах, без необходимости в движке рендеринга JavaScript.

Вот как это работает, в чём сильные стороны решения и где оно перестаёт иметь смысл.

Как работает Charts.css: графики на основе HTML-таблиц, стилизованные с помощью CSS

Charts.css — это CSS-фреймворк, который преобразует стандартные элементы <table> в визуальные графики с помощью utility-классов и пользовательских CSS-свойств. JavaScript в рендеринге не участвует. Всю визуальную работу выполняет движок компоновки браузера.

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

Установка

Через CDN:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/charts.css/dist/charts.min.css">

Через npm:

npm install charts.css

Представление данных с помощью пользовательских CSS-свойств

Каждая ячейка данных в вашей таблице использует пользовательское свойство --size для представления своего значения в виде числа от 0 до 1. Это нормализованное значение используется Charts.css для определения размера визуального элемента — столбца, сегмента, точки.

Вот минимальный пример столбчатой диаграммы:

<table class="charts-css bar" style="height: 200px;">
  <caption>Monthly Signups</caption>
  <thead>
    <tr>
      <th scope="col">Month</th>
      <th scope="col">Signups</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">January</th>
      <td style="--size: 0.4;">400</td>
    </tr>
    <tr>
      <th scope="row">February</th>
      <td style="--size: 0.7;">700</td>
    </tr>
    <tr>
      <th scope="row">March</th>
      <td style="--size: 1.0;">1000</td>
    </tr>
  </tbody>
</table>

Класс charts-css активирует фреймворк. Класс bar устанавливает тип графика. Значение --size в каждом <td> пропорционально управляет длиной столбца.

Применение различных типов графиков

Переключение типов графиков — это замена класса. Charts.css поддерживает столбчатые (bar), колоночные (column), линейные (line), площадные (area), круговые (pie) диаграммы и некоторые другие. Поддержка функций варьируется — bar и column наиболее отполированы, в то время как некоторые типы имеют более ограниченные возможности настройки.

<!-- Колоночная диаграмма -->
<table class="charts-css column">

<!-- Линейная диаграмма -->
<table class="charts-css line">

<!-- Круговая диаграмма -->
<table class="charts-css pie">

Дополнительные utility-классы управляют метками, осями, интервалами и отображением данных:

<table class="charts-css bar show-labels show-primary-axis data-spacing-10">

Доступность: реальная, но не автоматическая

Поскольку Charts.css использует настоящую разметку <table>, программы чтения с экрана могут получить прямой доступ к исходным данным — это реальное преимущество перед библиотеками на основе canvas или SVG. Но это работает только в том случае, если вы правильно пишете таблицу: включаете <caption>, используете <th> с правильными атрибутами scope и убеждаетесь, что содержимое ячеек имеет смысл. Фреймворк даёт вам структуру, но доступность всё равно зависит от вашей разметки.

Когда CSS-графики имеют смысл — а когда нет

Charts.css хорошо подходит для:

• Сайтов документации и статических страниц
• Простых панелей управления с нечасто обновляемыми данными
• Лёгких отчётов, где важен размер бандла

Это не подходящий инструмент для:

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

Для этих случаев JavaScript-библиотеки существуют не зря.

Заключение

Charts.css — это узкоспециализированный инструмент. Он хорошо делает одну вещь: превращает семантические данные HTML-таблиц в читаемые CSS-графики без единой строки логики рендеринга на JavaScript. С его небольшим размером трудно спорить для статических контекстов или контекстов с низкой интерактивностью. Просто подходите с чёткими ожиданиями — это дополнение к JavaScript-библиотекам для построения графиков, а не их замена.

Часто задаваемые вопросы

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.