Fifteen Charts, Two Themes, Zero Dependencies
I needed dashboard charts that match my design system. None existed. So I built the library.
A complete SVG chart library — KPI strips, sankey diagrams, line charts with tooltips, funnels, heatmaps, treemaps, and nine more on top of those. Dark theme and light theme, both designed from day one. Built solo in a working week. Zero runtime dependencies.
Transcript
Data has always had a clarity problem. Numbers exist, meaning doesn't. Not until someone decides how to show it. This is a chart library built for that decision.
KPI cards start with signal. Headline metrics live at the top, compact, unambiguous, with the trend line built in. No chart needed when a number can speak.
Donut and line. The donut gives proportion at a glance. Soft fills a deliberate gap. The line chart beside it shows the same story across time: monthly active users, the slope doing the work.
Mouse over on the line chart, a tooltip appears. Hover anywhere, and a tooltip surfaces the exact value. Every chart in the library responds the same way.
Bars and stacked bars. Grouped bars for comparison, stacked bars for composition. Rounded ends, chalky fill, room to breathe between columns. The palette is restrained: enough colour to encode meaning, not enough to distract from it.
Stacked area. The stacked area chart layers contribution over time. Translucent fills let the lower series show through. The eye reads both the total and the parts simultaneously.
Sankey. The Sankey is the most ambitious chart in this set, and the one that earns its complexity. Flows move left to right. The width of each ribbon is proportional to volume. You can follow a cohort from entry through every decision point: where they continue, where they exit, where they convert. The tooltip lights up with count and percentage. Hover a flow, and it isolates, dimming everything else. The 46% completion figure in the stat panel updates in context. A Sankey shouldn't need a legend. It should explain itself. This one does.
Funnel. The funnel strips a journey to its essentials. Each step is a bar. Each bar is labelled. Drop-off is visible between rows, not buried in a table. Sequential, unambiguous.
Matrix, scatter and box. The matrix handles multi-dimensional comparison: heat-map colouring over a grid, so the eye finds the outlier faster than a sorted table would allow. Scatter plots map two continuous variables. The dot size can carry a third. The box plot beside it shows the same distribution differently: median, spread, outliers, without obscuring individual points.
Bubble, Gantt and waterfall. Bubble charts for three-dimensional positioning, Gantt for sequencing phases and dependencies, and a waterfall bridge for financial storytelling, where additions and subtractions stack to a net result.
Radar. The radar chart surfaces multi-axis balance, or imbalance. The heat map closes the library: frequency and intensity across two categorical axes, colour carrying all the weight.
Every chart is SVG. Every chart has a tooltip. Every chart was built to be read by someone who doesn't have time to wonder what they're looking at. That's the standard. That's the library.
Why it matters
Every design leader who needs charts faces the same false choice. Bend Chart.js, Recharts, or ECharts to fit the design system and lose half a day per chart to CSS overrides. Or commission a designer to hand-draw SVGs that an engineer then has to make data-driven. Neither is fast. Neither produces charts the team actually wants to use.
The cost compounds. Every dashboard shipped with off-the-shelf charts erodes brand consistency. Every override conversation between design and engineering is a tax. Every "the chart looks wrong in dark mode" Slack message is a paper cut.
What the library covers
- KPI cards and KPI strips, with sparklines
- Donut, line (with tooltips), grouped bars, stacked bars, area
- Sankey — the ambitious one
- Funnel, heatmap, scatter, box plot, bubble
- Gantt, waterfall, radar, treemap
- All themed for both dark and light surfaces, with hover states and entry animations included
How it's built
- Pure SVG. No Canvas, no WebGL, no heavyweight rendering layer.
- Each chart is a single React component, themed via CSS variables.
- Dark and light themes are first-class, not retrofitted as a colour-swap afterthought.
- Tooltips, hover states, and entry animations match the surrounding design system, not the library's defaults.
- Drops directly into the AMP→Vercel workflow from Part 1 — same look as the dashboards they live on.
The stack
- React + SVG for the runtime — no chart-library dependency
- Claude Code as the build partner
- CSS variables for theme tokens, so dark/light is a single attribute switch
- Remotion for this walkthrough video, with the same Strategic Cobalt design system
What this changes
Most design leaders treat charts as a thing engineering owns. But charts are the surface on which every product decision is judged. When the same person can specify the chart, design it, build it, and ship it, the gap between "we should look at this data differently" and "the team is now looking at this data differently" closes from weeks to hours.
The library is the second piece of the AI-assisted analytics workflow. The first piece is the pipeline that turns a question into a deployed dashboard. This is the chart layer that pipeline renders into.
Outcome
15+ chart types, two themes, built solo in one working week.
Used in production on crowley.nl dashboards and inside the AMP→Vercel workflow.
Zero npm dependencies in the runtime. Drops into any React project as plain SVG.