Charts · line, bar, pie & more

Fourteen SVG charts that size to their box and follow the theme: line, area, column, bar, pie, donut, scatter, bubble, radar, heatmap, gauge, funnel, treemap, radial bar and waterfall. Data can be a signal — change it and the chart animates from the old numbers to the new ones, axes included. Colours come from the theme's --zap-chart-1…8 tokens in a fixed order, so a series keeps its colour when others are hidden.

Hover for values · click a legend entry to hide a series
Revenue by channelline · $K per month
$20K$40K$60K$80K$100K$120KJanFebMarAprMayJunJulAugSepOctNovDec
Traffic sourcesarea · overlaid
020406080JanFebMarAprMayJunJulAugSepOctNovDec
Sales by regioncolumn
020406080Q1Q2Q3Q4
Top productsbar · units sold
02004006008001,000AuroraNimbusVertexPulseEcho883707556465248
Market sharedonut
89points
Sessions by devicepie
Dealsbubble · days open × win score, size = value
020406080100020406080100
Model comparisonradar
SpeedAccuracyCostRecallLatencyCoverage
Server loadgauge
35%CPU0%100%
66%Memory0%100%
Activity ringsradial bar · % of goal
Signup funnelfunnel
Visited12K 100%Signed up4,221 35.2%Activated1,932 16.1%Subscribed949 7.9%Renewed624 5.2%
Busiest hoursheatmap · orders per 2 h
Mon1262367190909888856431Tue512133568788102103775443Wed14917336475979899795534Thu1511931668710396102797035Fri07132864809510799745930Sat3217293234524556344114Sun1431019344247575541383000:0004:0008:0012:0016:0020:000107
Spendingtreemap · $K
Payroll87Cloud132Office258Marketing70Legal62Training31Events98Other (3)80
Tiny chartssparkline + CSS bars
Mon
Tue
Wed
Thu
Fri
Sat
Sun
Profit & losswaterfall · $K
0100200300400RevenueCOGSGrossR&DSalesG&AOtherNet+392-129263-68-41-24-1129

Usage

import { signal } from "./index.js";
import { LineChart, AreaChart, ColumnChart, BarChartH, PieChart, DonutChart, ScatterChart,
         RadarChart, Heatmap, Gauge, Funnel, Treemap, RadialBar, WaterfallChart } from "./components/chart.js";

// Data may be plain, a signal or a getter — set it and the chart tweens to the new numbers.
const series = signal([{ name: "Online", data: [62, 70, 75] }, { name: "Retail", data: [48, 44, 51] }]);
LineChart({ labels: ["Jan", "Feb", "Mar"], series, format: (v) => "$" + v + "K" })
AreaChart({ labels, series, stacked: true })
ColumnChart({ labels: ["Q1", "Q2", "Q3", "Q4"], series, stacked: false })   // horizontal: true → bars
DonutChart({ data: [{ label: "Kartex", value: 42 }, { label: "Others", value: 58 }], centerLabel: "points" })
ScatterChart({ series: [{ name: "Won", data: [{ x: 12, y: 80, r: 40 }] }] })   // r → bubbles
RadarChart({ axes: ["Speed", "Cost", "Recall"], series, max: 100 })
Heatmap({ x: hours, y: days, values: grid, showValues: true })
Gauge({ value: cpu, label: "CPU", format: (v) => v + "%" })
Funnel({ data: [{ label: "Visited", value: 12000 }, { label: "Signed up", value: 4100 }] })
Treemap({ data: spend })          // > 8 entries fold into "Other"
RadialBar({ data: [{ label: "Move", value: 72 }] })
WaterfallChart({ data: [{ label: "Revenue", value: 420 }, { label: "COGS", value: -150 }, { label: "Net", total: true }] })