Chart
Usage
Bar, line, area, donut and radial charts over one shared data shape — rows of data plus a series list — so switching `type` does not mean re-learning a different prop shape. Built on Recharts (MIT); the reference template used ApexCharts, which moved to a dual license that requires a paid OEM licence to redistribute inside a product like this one, so it was not an option here.import { Chart } from '@summonware/ui';Best practices
DoPick a series `color` by meaning (success/warning/danger), not by which one looks nice — a colour that means "at risk" elsewhere should mean it here too.
DoUse `bar-horizontal` when category labels are long (channel names, product titles) — a rotated x-axis label is never the right fix.
DoReach for `donut`/`radial` only for a part-to-whole story with a handful of slices. Past 5-6 slices, a table communicates the same numbers better.
Don'tStack more than two or three series — a stacked bar past that point is unreadable, not information-dense.
Anatomy
Grid & axesToken-coloured (`--sw-border`, `--sw-text-muted`), not styled per chart.
Series *One or more value dimensions, each drawn in a brand-token colour.
TooltipHover detail, themed to match the surrounding surface.
LegendShown automatically once a chart has more than one series.
Examples
Common configurations, variations and states.Bar chart
Two series compared side by side across months — the default shape for "how are we trending" dashboard tiles.
Bar chart, stacked
Two series that sum to a meaningful total — recurring plus new revenue per month. Stack series that are parts of one whole, not unrelated metrics like revenue and cost: a stacked bar reads as "this much of what", so what's being stacked has to actually add up.
Bar chart, horizontal
Long category labels read better along the axis than rotated under it.
Line chart
A trend over time — the shape for "is this going up or down", not "what is the total".
Area chart
A line chart with the space under it filled — reads as volume/magnitude more than a bare line does.
Donut chart
Part-to-whole for a handful of slices — traffic share by channel, not a 12-category breakdown.
RadialBar chart
Multiple progress-style values as concentric rings — a dashboard-tile alternative to a row of progress bars.
Reference variants
7 of 22 labels from the reference are demonstrated above.Bar chartBar chart stackedBar chart horizontalBasic line chartArea chartPie Charts donutRadialBar ChartsBar chart horizontal stackedPie ChartsRadialBar Charts Custom AngleRealtime ChartDifferent line chartMixed ChartCandlestick ChartBubble ChartBubble Chart 3dScatter ChartScatter Chart DatetimeHeatmap ChartsHeatmap Charts RoundedRadar ChartsRadar Charts Multiple Series