The field guide

Examples, worked.

Every chart type, all four data formats, multi-series, overlays, and live updates, each with copy-paste code for every framework. Switch between Paper and Night in the nav to re-theme the whole page at once.

Eight types

Every chart type

Line, bar, area, scatter, pie & donut, radial gauge, and combo share one API and one theme system, and every wrapper supports all of them.

Line & area

Smooth or linear curves, optional points, gradient area fills.

import { AreaChart } from '@chartlite/core';

new AreaChart('#chart', { data, curve: 'smooth' }).render();

Bar & combo

Grouped or stacked bars, and combo charts that mix bars with a trend line.

import { ComboChart } from '@chartlite/core';

new ComboChart('#chart', { data: comboData }).render();

Pie, donut & radial

Categorical breakdowns and radial gauges for KPIs and scores.

import { RadialChart } from '@chartlite/core';

new RadialChart('#chart', {
  data: [{ x: 'Score', y: 74 }],
  max: 100, startAngle: -120, endAngle: 120,
}).render();

Scatter

Numeric x/y points with configurable shape, size, and labels.

import { ScatterChart } from '@chartlite/core';

new ScatterChart('#chart', { data }).render();

Flexible input

Four data formats

Pass your data in whatever shape it already has. Chartlite normalizes all four formats in every framework.

DataPoint[] & number[]

The classic [{ x, y }] array, or a bare number[] for quick charts.

import { LineChart } from '@chartlite/core';

new LineChart('#chart', { data: [30, 45, 38, 52, 48] }).render();

Column-oriented & series-first

DataFrame-style { x: [...], y: [...] }, or series-first for multi-series.

new BarChart('#chart', {
  data: { x: ['Q1','Q2','Q3','Q4'], y: [45, 52, 48, 61] },
}).render();

Multiple datasets

Multi-series & legends

Grouped bars, multi-line, and stacked areas with auto colors and a configurable legend.

Grouped bars with legend

Series-first data renders grouped bars with an automatic legend.

new BarChart('#chart', { data: seriesFirstData, legend: { show: true } }).render();

Overlays

Reference lines & annotations

Draw thresholds, highlight regions, and annotate points declaratively, in any framework.

Reference line

Mark a goal or threshold with a labelled reference line.

new LineChart('#chart', {
  data,
  referenceLines: [{ axis: 'y', value: 50, label: 'Goal' }],
}).render();

Fast by default

Live updates & SVG reuse

Chartlite keeps the SVG root stable across updates while rebuilding current chart content. This chart updates every ~1s.

Streaming line (SVG reuse)

A rolling window updated on an interval, with no flicker and no churn.

const chart = new LineChart('#chart', { data, curve: 'smooth' });
chart.render();

setInterval(() => chart.update(nextWindow()), 1000);