Data viz
Area chart
A line chart with the ground filled in — for volume and cumulative totals over time. Same SVG foundation and theme as the rest of the family, with a soft top-down gradient under each series. One component, three fills.
npx shadcn@latest add @orbit/area-chartOverview
Cumulative throughput with a gradient fill. Hover the plot for the crosshair and tooltip.
Variants
A single variant moves from one filled series, to stacked volumes, to a 100% composition that shows share rather than amount.
Options
The gradient derives from the accent, so recoloring is one prop. Drop the grid for a sparkline-like look.
In context
An effort-mix panel — where the work went each month, with a working Volume / Share toggle.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "single" | "stacked" | "percent" | "single" | single plots data; stacked/percent plot categories + series. percent normalizes each column to 100%. |
| curve | "smooth" | "linear" | "smooth" | Monotone curve or straight segments. |
| data | { label: string; value: number }[] | — | Single-series points for the single variant. |
| categories | string[] | — | X labels for stacked | percent. |
| series | { name: string; values: number[]; color?: string }[] | — | Stacked band values, bottom band first. Colors default to the fixed CHART_SERIES palette by position. |
| accent | string | "var(--pri)" | Single-series stroke + gradient color (any token or color-mix). |
| height | number | 340 | Total height in px, legend included. Width is responsive. |
| showGrid | boolean | true | Horizontal hairline gridlines. |
| showLegend | boolean | true | Legend under stacked variants. Never rendered for one series. |
| name | string | "Value" | Single-series name shown in the tooltip. |
| formatValue | (v: number) => string | String | Formats tooltip and axis values (percent shows shares). |
| ariaLabel | string | — | Plain-language summary for the chart's role=“img”. |
| …rest | HTMLAttributes<HTMLDivElement> | — | Forwarded to the root div, including ref and className. |
Usage
The filled area emphasizes volume and accumulation — use it when magnitude matters, not just direction.
Use for volume over time
The fill reads as accumulated quantity — ideal for throughput, traffic, or burn-up.
Overlap opaque areas
Stack series instead of layering solid fills, or front areas hide the ones behind.
Switch to 100% for share
When the mix matters more than the total, normalize so each band shows its percentage.
Stack more than ~4 bands
Thin middle bands get impossible to read — group the long tail into “Other”.
Keyboard & accessibility
The chart renders as a labelled image; the crosshair tooltip reads every band at the hovered point, top band first.