Data viz
Line chart
For trends over time — throughput, velocity, burn-up. Same SVG foundation and theme as the bar chart: Geist axes, the fixed Orbit series palette, a dark tooltip, and a dashed crosshair that tracks the cursor. One component, three line styles.
npx shadcn@latest add @orbit/line-chartOverview
Created vs. completed over seven months. Hover the plot for the crosshair and shared tooltip.
Variants
A single variant switches between one focused line, a multi-series comparison, and a stepped line for discrete state changes. The curve prop trades the monotone easing for straight segments.
Options
Hide the point dots for a clean trend line, drop the gridlines, or recolor a single-series line with the accent.
In context
A velocity panel — the headline metrics above the trend that produced them, with a working range toggle.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "single" | "multi" | "stepped" | "multi" | single/stepped plot data; multi plots categories + series. |
| curve | "smooth" | "linear" | "smooth" | Monotone curve or straight segments. The stepped variant overrides it. |
| data | { label: string; value: number }[] | — | Single-series points for single | stepped. |
| categories | string[] | — | X labels for the multi variant. |
| series | { name: string; values: number[]; color?: string }[] | — | Multi-series values. Colors default to the fixed CHART_SERIES palette by position. |
| accent | string | "var(--pri)" | Single-series line color (any token or color-mix). |
| height | number | 340 | Total height in px, legend included. Width is responsive. |
| showGrid | boolean | true | Horizontal hairline gridlines. |
| showDots | boolean | true | Surface-cored dots on every point. |
| showLegend | boolean | true | Legend under the multi variant. 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. |
| ariaLabel | string | — | Plain-language summary for the chart's role=“img”. |
| …rest | HTMLAttributes<HTMLDivElement> | — | Forwarded to the root div, including ref and className. |
Usage
Lines show change over a continuous axis — usually time. Keep the trend the hero.
Use a continuous x-axis
Lines imply progression — reserve them for time or another ordered, evenly-spaced axis.
Plot too many lines
Past three or four series the chart turns to spaghetti; split it up or highlight one.
Smooth for trends, step for states
Monotone curves read as a trend; stepped lines show a value that holds then jumps.
Truncate the axis to dramatize
A misleading baseline exaggerates wiggles — the scale here always starts at zero.
Keyboard & accessibility
The chart renders as a labelled image; the crosshair tooltip reads every series at the hovered point.