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.
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.