Charts
Recharts-based charts framed by ChartFrame. Not in the root entry; install the optional `recharts` peer.
22 pages · 22 live examples, generated from the design system metadata.
AreaChartFilled areas per series over categories, stacked into a total or overlapping from zero.2 examplesBarChartBars per category: single, grouped or stacked, upright or on their side, with references, annotations and a highlighted bar.2 examplesBoxPlotChartDistributions side by side: median, quartiles, whiskers at 1.5 × IQR and outliers, from raw samples or precomputed summaries.1 exampleChartFrameThe frame every chart renders in: a captioned figure with one keyboard stop and a readout, loading, empty, invalid and error states, locale-aware numbers and a data table built from points. Use it around a custom visual, with the Recharts composition parts and Gaudi primitives.1 exampleComposedChartBars, lines and areas on one category axis, with a right-hand axis for a series in other units.DonutChartParts of a whole as a donut with a centre summary, or a pie (PieChart); slices are selectable and small ones fold into Other.2 examplesFunnelChartSteps in order with the conversion from each step to the next, as left-aligned bars or a centred funnel.1 exampleGaugeChartOne reading against threshold bands with a target tick, on any scale.1 exampleHeatmapChartValues on a grid of rows and columns, on a sequential or diverging ramp; Up and Down move between rows.1 exampleHistogramChartObservations in round bins with labelled markers such as the median, a percentile or a budget.1 exampleLineChartLines per series over categories, with projections, references, annotations and a choice of curve.1 exampleOrgChartA connected organization hierarchy with person cards, expandable reporting lines, and contained scrolling.RadarChartScores on several axes at once, one record per axis and a value per series; a dashed series reads as a target.1 exampleRadialChartProgress against a full 0–100 track, one ring per record (RadialBarChart).1 exampleRangeChartA band between a low and a high value per category with a line through it: forecasts, percentile spreads, highs and lows.1 exampleSankeyChartFlows between stages with widths proportional to volume; each flow is a keyboard point and a table row.1 exampleScatterChartCorrelation between two numbers, with labelled points, reference lines and bubbles sized by a third value (BubbleChart).1 exampleSparklineA word-sized trend without axes, for stat cards, tables and prose; still a named chart with its data table.1 exampleStackedBarListRanked rows of stacked segments that grow with the list: issues by status per team, readers by source per post.1 exampleTournamentBracketA knockout bracket with connected match cards, round paging, scores, penalties, and explicit winners.TreemapChartNested rectangles sized by value, tinted by group or shaded on the heat ramp.1 exampleWaterfallChartHow a starting value becomes an ending one through increases and decreases, with running totals and subtotals.1 example