Charts are not decoration — they answer a question. Every recipe in this section starts with the question the chart is meant to answer, sketches the SVG inline, then drops it into a real UI so you see how it lives next to a header, a table, a row card. Each recipe ends with the <Chart.X> React snippet you can copy.
Line, area, bar, pie, donut and their close cousins. If you only learn twelve charts, learn these — they cover roughly 90% of every analytics screen you'll ship.
One metric over time. The baseline chart — start here if you're unsure.
Compare 2–4 series. Above 5 lines, switch to small multiples.
Two-to-three components summing to a total. Great for revenue mix.
Discrete buckets — days, weeks, products. The "how big is each" chart.
Long category labels read better horizontal. Pick when names are wide.
Compare two metrics per category. Limit to 2–3 series.
Show parts of a whole, per category. Reach for the same shape as area.
Composition + a focal stat. Skip if more than 5 slices.
Classic share-of-total. Reserve for 2–4 slices that add to 100%.
One value vs. a target. The KPI card's favourite companion.
Tiny line, no axes — the trend chip inside a KPI card.
One bar, one target marker, three qualitative bands. Dense and honest.
Heatmaps, funnels, radar, treemaps — pull these out when the data shape genuinely needs them. Each is heavier visually, so reach for them deliberately, not by default.
GitHub-style activity grid. Density at a glance, no zoom.
Sequential drop-off — visits → carts → checkouts → buys.
Two continuous variables — correlation, outliers, fit line.
Profile across 5–7 dimensions. Compare one entity to a benchmark.
Hierarchical share. Read areas, not heights — sizes are 2D.
One bounded score (0–100). Beloved by execs, divisive among designers.
Start → +/- → end. Accounting's favourite chart for a reason.
Open / high / low / close per period. Niche outside trading screens.
Three of the fundamentals — single-line, vertical bars and sparkline — each include a dedicated "Used in a dashboard" variation block inside their recipe. Open those three to see how a chart lives next to a page header, a KPI hero, a row card and a small mobile tile.
From recipe 01 — embedded in a page-header + KPI hero layout.
From recipe 04 — bars in a side-by-side comparison card.
From recipe 11 — small charts inside mobile row cards.
Component API, common props, the 20 sub-types. Read this when you need depth.