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
$0K$25K$50K$75K$100K$125K$150KJanFebMarAprMayJunJulAugSepOctNovDec
Traffic sourcesarea · overlaid
020406080JanFebMarAprMayJunJulAugSepOctNovDec
Sales by regioncolumn
020406080Q1Q2Q3Q4
Top productsbar · units sold
02004006008001,000AuroraNimbusVertexPulseEcho972529523391153
Market sharedonut
105points
Sessions by devicepie
Dealsbubble · days open × win score, size = value
020406080100020406080100
Model comparisonradar
SpeedAccuracyCostRecallLatencyCoverage
Server loadgauge
20%CPU0%100%
40%Memory0%100%
Activity ringsradial bar · % of goal
Signup funnelfunnel
Visited12K 100%Signed up7,731 64.4%Activated4,594 38.3%Subscribed2,283 19%Renewed1,615 13.5%
Busiest hoursheatmap · orders per 2 h
Mon137122956918797101845643Tue13137426874909598796233Wed2101738677610010095766331Thu1291033638894104103776441Fri181294066868893100746536Sat8016263737464248453820Sun9131119414655585538411800:0004:0008:0012:0016:0020:000104
Spendingtreemap · $K
Cloud228Office261Marketing88Software83Hardware87Legal90Training76Other (3)160
Tiny chartssparkline + CSS bars
Mon
Tue
Wed
Thu
Fri
Sat
Sun
Profit & losswaterfall · $K
0100200300400500RevenueCOGSGrossR&DSalesG&AOtherNet+417-124293-75-55-28-10125

Usage

JavaScript
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 → barsDonutChart({ data: [{ label: "Kartex", value: 42 }, { label: "Others", value: 58 }], centerLabel: "points" })ScatterChart({ series: [{ name: "Won", data: [{ x: 12, y: 80, r: 40 }] }] })   // r → bubblesRadarChart({ 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 }] })