AreaChart

A trend line with the volume underneath filled. Monthly signups below are honest sample data, rendered as a static SVG with no tooltips.

Monthly signups

<AreaChart data={signups} />

With values

Pass showValues to print each value above its point.

<AreaChart 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`	`"Area chart"`	Chart name; opens the auto-summary.
`showValues`	`boolean`	`false`	Print each value above its point.
`class`	`string`	-	Style passthrough.

Static honesty

Static SVG, no tooltips; values appear in text only whenshowValues is set. The fill is the accent at 25% viacolor-mix, closed to the zero baseline. X labels longer than 8 characters are truncated with the full text kept in a<title>. The baseline is clamped into the viewBox, so negative values (not shown in the demos) fill 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 point carries a <title> with its "{label}: {value}".
Y ticks come from niceTicks; tick and axis text uses the muted token at xs size.