Charts

Seven chart types plus inline sparklines. Every one reads the theme tokens directly and re-renders when you change the accent or flip to dark.

Try the palette button in the header — the charts below retint live. That works because colours are resolved from CSS custom properties at render time rather than hard-coded.

Area

data-chart="area" data-series="userGrowth"

Line

data-chart="line" data-series="activeUsers"

Column — grouped

data-chart="column" data-series="signupsChurn"

Column — stacked

Set stacked: true on the dataset

Bar — horizontal

data-chart="bar"

Donut

Centre total from centerLabel

Radial

A single percentage

Bar — distributed colours

Set distributed: true for a per-bar palette

Heatmap

data-chart="heatmap"

Sparklines

Inline SVG, no library — safe to use hundreds of times on one page

Line only

8,942

With area fill

6,437

Declining

128

Volatile

344

Inline, small Wide Tall

<span data-sparkline="4,6,5,8,7,9" data-color="chart-1" data-w="80" data-h="28" data-area></span>

Adding your own dataset

Add an entry to src/js/data.js and reference it by key. Colours are token names, so the chart follows the theme automatically.

export const DATASETS = {
  myChart: {
    categories: ["Jan", "Feb", "Mar"],
    series: [
      { name: "Signups", data: [412, 468, 391] },
      { name: "Churned", data: [92, 148, 141] },
    ],
    colors: ["--chart-1", "--chart-4"],
    stacked: false,          // column charts only
  },
};

Donut and radial datasets take a slightly different shape — see usersByRole and mfaAdoption for working examples.