Content & Data
Line Chart
Line Chart is a single-series, static line chart built on recharts — a single stroked path with hollow-ring point markers, no axes/gridlines/legend/tooltip.
Single component — no variants
betaReact AvailableFigma AvailableDocs Partial
- React last updated
- 2026-07-18
- Documentation last updated
- 2026-07-18
- Accessibility target
- WCAG 2.2 AA (target)
- Version
- 0.1.0-beta
Known open questions
- Multi-series support is deferred — not shown in the Figma reference and not built here; v1 is single-series only.
- Interactivity (hover tooltips, legend interactivity) is deferred — v1 is deliberately static, per the approved v1 scope.
- Axis labels and gridlines are deferred — the Figma reference has none at all for Line Chart.
- Fixed chart height (width is fluid) is this implementation's own decision, not something Figma specified.
Monthly signups trend
Single-series, static line chart — a single stroked path with hollow-ring point markers, no axes/gridlines/legend/tooltip. The underlying data is also available to assistive tech via a visually-hidden table.
Signups trend by month
| Label | Value |
|---|---|
| Jan | 58 |
| Feb | 95 |
| Mar | 76 |
| Apr | 128 |
| May | 108 |
| Jun | 140 |
Purpose
A single-series, static line chart for visualizing a trend across ordered points.
Anatomy
A recharts LineChart inside ResponsiveContainer (fluid width, fixed height — genuinely fills its parent, not a fixed pixel box), a single Line stroked in semantic/action/primary at 2px, with a 3px-radius hollow-ring dot per point (semantic/surface/default fill, semantic/action/primary stroke). Curve type is "linear" (straight segments between points) — confirmed by reading the actual vector path data for node 2058:2560 via the Figma Plugin API: every segment is a straight "L" (lineto) command, with no curve commands at all. No XAxis or YAxis rendered at all, matching the Figma reference exactly. A visually-hidden (`sr-only`) data table with the same label/value pairs is rendered alongside, and the chart's own SVG is aria-hidden with role="img" + aria-label + aria-describedby pointing at the table.
Variants and states
default
When to use
A single trend line across ordered categories (e.g. months) where the shape of change matters.
When not to use
Categorical comparisons without an inherent order — use Bar Chart. Multi-series trends are deferred.
Accessibility
role="img" with an accessible name, plus a visually-hidden (sr-only) data table with the same label/value pairs linked via aria-describedby — the line path alone conveys nothing to assistive tech.
Common mistakes
Treating "static" as "no accessibility work needed" — the hidden data table is required, not optional polish. Adding axis labels, gridlines, or a legend the Figma reference doesn't show.
Properties
data ({ label, value }[]). label (accessible name / hidden table caption). height (fixed pixel height, default 240 — width is fluid, filling the parent).
Why is there no axis at all, not even X-axis labels?
Figma's own "Line Chart (example)" frame has no axis labels at all — unlike Bar Chart, which does show month labels. This component matches that reference exactly rather than adding chrome Figma didn't show.
Why "linear" curve type, not a smoothed curve?
Verified, not guessed: the actual vector path data for the Figma "Line" node (2058:2560), read directly via the Figma Plugin API, is "M 0 140 L 43.3 93.3 L 86.7 110.8 L 130 43.75 ..." — every segment is a straight lineto ("L") command. An earlier draft used "monotone" (a smoothed curve) as an unverified default; that was corrected to "linear" once the real path data was checked.
Why ResponsiveContainer instead of fixed pixel dimensions?
A real consumer embeds this in a variable-width dashboard/card, so the chart should genuinely fill its parent — fixed dimensions were an earlier draft, justified partly by a jsdom/ResizeObserver test limitation that has a standard fix (a ResizeObserver polyfill in vitest.setup.ts) rather than a reason to constrain real-world sizing.
How is the underlying data exposed to screen readers?
A visually-hidden (sr-only) table with the same label/value pairs, linked to the chart via aria-describedby — the same mechanism Bar Chart uses.
Tokens used
semantic/action/primarysemantic/surface/default
Component API
| Prop | Type | Default | Description |
|---|---|---|---|
| data | { label: string; value: number }[] | — | Single-series data. Multi-series is deferred. |
| label | string | — | Accessible name for the chart — also used as the hidden data table's caption. |
| height | number | 240 | Fixed pixel height. Width is fluid (ResponsiveContainer), filling the parent. |
React example
Copy React example
import { LineChart } from "@/components/ui";
const monthlySignups = [
{ label: "Jan", value: 58 },
{ label: "Feb", value: 95 },
{ label: "Mar", value: 76 },
{ label: "Apr", value: 128 },
{ label: "May", value: 108 },
{ label: "Jun", value: 140 },
];
export function Example() {
return <LineChart data={monthlySignups} label="Monthly signups" />;
}