Quick Start

grafit is a dependency-free TypeScript charting library built on Canvas: declarative configuration with a single object, 27 series types, interactivity and themes out of the box.

Step 1. Container

The chart renders into any block element and takes its size from it:

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

Step 2. Your first chart

import { Charts } from 'grafit-charts';

const chart = Charts.create({
  container: document.getElementById('chart')!,
  data: [
    { month: 'Jan', revenue: 42 },
    { month: 'Feb', revenue: 58 },
    { month: 'Mar', revenue: 51 },
  ],
  series: [{ type: 'bar', xField: 'month', yField: 'revenue', name: 'Revenue' }],
  title: { text: 'Revenue by month' },
});

data is an array of flat objects; the series specifies which fields to plot (xField/yField) and the display name (name). Axes, legend, tooltips and the entry animation are enabled automatically.

Here is what the result looks like with a couple of series:

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 },
  ];
}

Step 3. Updating

Options are immutable — changes are passed via methods and applied with animation:

await chart.updateDelta({ theme: 'dark' }); // targeted change
await chart.update({ ...options, data: freshData }); // full replacement
chart.destroy(); // when you are done

Step 4. Where to go next

I want to…	Page
understand how options work	Configuration
reduce the bundle or use a CDN	Installation and bundle size
pick a chart type	the “Series” section — from Line to Gauges
see options shared by all series	Common series options
configure axes and formats	Axes
tooltip, legend, annotations	the “Chart components” section — starting with Legend
zoom, selection, events	the “Interactivity” section — starting with Zoom
dark theme and custom colors	Themes
compact charts inside a table	Sparklines
candlestick chart with a navigator	the preset on the Candlestick page

Status

The library is under active development. The API may change without backward compatibility.