Line chart

Multi-series trend chart with Concrete grid, endpoint, target, and legend language.

Line chart is the default trend primitive for product summaries. Use dots only for inspection states; let the line and endpoint carry the hierarchy.

DOM render JPEG render

Agent runs

Agent run volume with accepted output overlay.

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

Rendered matrix.

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

Agent runs

Agent run volume with accepted output overlay.

ready

Agent runsAccepted

Default

Multi-series line chart with endpoint labels.

/render state

Agent runs

Agent run volume with accepted output overlay.

ready

Agent runsAccepted

Target

Trend with a horizontal reference target.

/render state

Agent runs

Agent run volume with accepted output overlay.

ready

Agent runsAccepted

Inspect

Point markers enabled for inspection.

/render state

Agent runs

Loading data

Loading

Stable loading state.

/render state

Agent runs

empty

No data

Empty

No-data state.

/render state

Agent runs

error

Could not load the run summary.

Error

Failed data state.

/render state

Props

Public contract.

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.
`message`	`string`	-	Optional async state message override.
`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.
`height`	`number`	`220`	SVG plot height.
`legend`	`boolean`	`true`	Shows derived legend indicators.
`surface`	`'raised' \| 'sunken' \| 'transparent'`	`raised`	Plot stage surface.