Area chart

Soft filled trend chart for volume, confidence, and generated UI previews.

Area chart should stay light. It is useful when the signal is cumulative or atmospheric, not when exact comparison is the main task.

Accepted runs and total executions.

ready

Agent runsAccepted

Playground

Props in the URL.

Controls update query params directly. Complex slots use curated fixtures so component states stay deterministic, linkable, and screenshot-ready.

Loading playground.

States

Every state maps to the same component render route through the `state` query param.

Accepted runs and total executions.

ready

Agent runsAccepted

Default

Soft area chart with endpoint labels.

ready

Agent runsAccepted

Quiet

Transparent surface and hidden axes for compact generated UI.

Accepted runs and total executions.

ready

Agent runsAccepted

Dots

Inspection state with point markers.

Props

Name	Type	Default	Description
`title *`	`string`	-	Chart title.
`description`	`string`	-	Muted supporting copy.
`series`	`readonly DataSeries[]`	`[]`	One or more typed data series.
`target`	`number`	-	Optional horizontal reference line.
`state`	`'ready' \| 'loading' \| 'empty' \| 'error'`	`ready`	Async data state.
`showDots`	`boolean`	`false`	Shows every point marker for inspection states.
`showEndLabels`	`boolean`	`true`	Labels each series endpoint.
`showGrid`	`boolean`	`true`	Shows horizontal grid rules.
`showXAxis`	`boolean`	`true`	Shows sparse x-axis labels.
`showYAxis`	`boolean`	`true`	Shows y-axis tick labels.
`stacked`	`boolean`	`false`	Reserved for stacked area compositions.
`height`	`number`	`220`	SVG plot height.
`legend`	`boolean`	`true`	Shows derived legend indicators.
`surface`	`'raised' \| 'sunken' \| 'transparent'`	`raised`	Plot stage surface.