01The idea
Dashboards in client products usually need a line, a bar and a sparkline, and they usually get a 200kB charting library to draw them. We wanted to see how small the useful part could be.
The kit covers the six charts we draw most often, renders plain SVG and inherits colours and fonts from the page, so the charts look like the product instead of like a library.
02How it's built
Each chart is a small React component that turns data into SVG paths. Scales are a few lines of maths, and everything else (colour, type, spacing) comes from CSS variables.
- Line, area, bar, sparkline, donut and progress
- Plain SVG with real text, so it's accessible and printable
- Styled through CSS variables, not a wall of props
- Under 4kB gzipped, no dependencies
1// a sparkline is one path and a little maths2export function Sparkline({ data, w = 120, h = 32 }: Props) {3 const max = Math.max(...data), min = Math.min(...data)4 const x = (i: number) => (i / (data.length - 1)) * w5 const y = (v: number) => h - ((v - min) / (max - min || 1)) * h6 const d = data.map((v, i) => `${i ? "L" : "M"}${x(i)},${y(v)}`)7 return (8 <svg viewBox={`0 0 ${w} ${h}`} role="img">9 <path d={d.join("")} fill="none" stroke="currentColor" />10 </svg>11 )12}03What we learned
Most dashboard charts need clear labels and honest axes far more than they need animation or zoom. Keeping the components tiny made those decisions easier to see and easier to argue for.
- Label the data, not just the axes
- Start bar charts at zero
- Let the product's type and colour do the styling
The kit now sits inside the dashboards we build for clients, and nobody has asked for the big library back.
