LineChart

A trend line through your points. Monthly signups below are honest sample data, rendered as a static SVG with no tooltips.

Monthly signups

<LineChart data={signups} />

With values

Pass showValues to print each value next to its dot.

<LineChart label="Weekly signups" data={weekly} showValues />

Props

Prop	Type	Default	Description
`data`	`Array<{ label: string; value: number }>`	-	Points in order, left to right.
`width`	`number`	`560`	viewBox width; the SVG scales to `100%`.
`height`	`number`	`240`	viewBox height.
`label`	`string`	`"Line chart"`	Chart name; opens the auto-summary.
`showValues`	`boolean`	`false`	Print each value above its dot.
`class`	`string`	-	Style passthrough.

Static honesty

Static SVG, no tooltips; values appear in text only whenshowValues is set. X labels longer than 8 characters are truncated with the full text kept in a <title>. A zero baseline is clamped into the viewBox, so negative values (not shown in the demos) draw below it.

Accessibility

The chart is an image (role="img") with an auto-summary label: "{Label}, {n} points, high {maxLabel} {max}, low {minLabel} {min}".
A <title> repeats the summary and a <desc> describes the reading order.
Every dot carries a <title> with its "{label}: {value}".
Y ticks come from niceTicks; tick and axis text uses the muted token at xs size.