Chart showcase
Fifteen chart types in one small toolkit: line, bars, stacked, donut, heatmap, calendar, treemap, sparkline, gauge, waterfall, flow, ranked bars, small multiples, KPI tiles and data tables. Each page has a live demo, a copyable snippet and the options.
- Works with a strict content security policy: no external scripts, fonts or styles, no
eval. - Light and dark themes, keyboard navigation, screen-reader labels, a data table behind every chart, optional patterns instead of colour.
- Every chart copes with empty, one-point and outlier data. Phone-friendly: charts resize to their container.
- Eight categorical colours checked for colour-blind separation and contrast; every number is made up.
See them working together
A made-up product dashboard for a fictional company, built from these charts: KPI tiles, recurring revenue by plan, a waterfall, a usage heatmap and more.
Line
One or a few series over time, with a typical-value line and an optional comparison.
View chart →Grouped bars
Compare two measures side by side per period, with a derived line on top.
View chart →Stacked
Parts of a whole per period, one stable colour per category.
View chart →Donut
Share of a total, with the hovered slice read out in the centre.
View chart →Heatmap
A grid of rows against columns, shaded by value, with clear no-data cells.
View chart →Calendar
One cell per day, laid out in weeks, to show rhythm and one-off spikes.
View chart →Treemap
Area proportional to value, packed into a rectangle.
View chart →Sparkline
A tiny trend with no axes, for tables, tiles and lists.
View chart →Gauge
Progress against a budget or limit, with the state spelled out in words.
View chart →Waterfall
How a starting number becomes an ending number, step by step.
View chart →Flow
Where money comes from and where it goes, as proportional ribbons.
View chart →Ranked bars
A top-N list with a bar per row, a detail line and optional click-through.
View chart →Small multiples
One mini chart per category on a shared layout, with a detail chart for the one you pick.
View chart →KPI tiles
Headline numbers with a change and a sparkline, plus a loading skeleton.
View chart →Data table
The accessible twin of every chart: plain numbers in a real table.
View chart →Use it in your own project
The whole toolkit is one stylesheet and one script with no dependencies. See the code and how to wire it up →