Быстрый старт

grafit — TypeScript-библиотека графиков на Canvas без зависимостей: декларативная конфигурация одним объектом, 27 типов серий, интерактивность и темы из коробки.

Шаг 1. Контейнер

Чарт рендерится в любой блочный элемент; размеры берёт у него:

<div id="chart" style="width: 100%; height: 360px"></div>

Шаг 2. Первый чарт

import { Charts } from 'grafit-charts';

const chart = Charts.create({
  container: document.getElementById('chart')!,
  data: [
    { month: 'Янв', revenue: 42 },
    { month: 'Фев', revenue: 58 },
    { month: 'Мар', revenue: 51 },
  ],
  series: [{ type: 'bar', xField: 'month', yField: 'revenue', name: 'Выручка' }],
  title: { text: 'Выручка по месяцам' },
});

data — плоские объекты; серия указывает, какие поля рисовать (xField/yField) и под каким именем показывать (name). Оси, легенда, тултипы и анимация входа включаются сами.

Так выглядит результат с парой серий:

config.ts

import { getData } from './data';
import type { ChartOptions } from 'grafit-charts';

export function createOptions(): ChartOptions {
  return {
    data: getData(),
    title: { text: 'Average temperature' },
    subtitle: { text: '°C by month' },
    series: [{ type: 'line', xField: 'month', yField: 'temperature', name: 'Temperature' }],
  };
}

data.ts

export function getData() {
  return [
    { month: 'Jan', temperature: -8 },
    { month: 'Feb', temperature: -6 },
    { month: 'Mar', temperature: 1 },
    { month: 'Apr', temperature: 9 },
    { month: 'May', temperature: 16 },
    { month: 'Jun', temperature: 21 },
    { month: 'Jul', temperature: 24 },
    { month: 'Aug', temperature: 22 },
    { month: 'Sep', temperature: 15 },
    { month: 'Oct', temperature: 8 },
    { month: 'Nov', temperature: 1 },
    { month: 'Dec', temperature: -5 },
  ];
}

Шаг 3. Обновление

Options иммутабельны — изменения передаются методами и применяются с анимацией:

await chart.updateDelta({ theme: 'dark' }); // точечное изменение
await chart.update({ ...options, data: freshData }); // полная замена
chart.destroy(); // по окончании работы

Шаг 4. Куда дальше

Хочу…	Страница
понять устройство options	Конфигурация
уменьшить бандл или подключить через CDN	Подключение и размер бандла
выбрать тип чарта	раздел «Серии» — от Line до Gauges
общие опции всех серий	Общие опции серий
настроить оси и форматы	Оси
тултип, легенда, аннотации	раздел «Компоненты чарта» — от Легенды
zoom, выделение, события	раздел «Взаимодействие» — от Zoom
тёмная тема и свои цвета	Темы
компактные графики в таблицу	Sparklines
свечной график с навигатором	пресет на странице Candlestick

Статус

Библиотека в активной разработке. API может меняться без обратной совместимости.