Component

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.
data
DOM renderImage render
Line chartDefault

Agent runs

Agent run volume with accepted output overlay.

ready

Playground

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

Loading playground

Rendered matrix

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

Default

Multi-series line chart with endpoint labels.

Agent runs

Agent run volume with accepted output overlay.

ready
Agent runsAccepted
Render state

Target

Trend with a horizontal reference target.

Agent runs

Agent run volume with accepted output overlay.

ready
Agent runsAccepted
Render state

Inspect

Point markers enabled for inspection.

Agent runs

Agent run volume with accepted output overlay.

ready
Agent runsAccepted
Render state

Compact

Headerless compact trend for dashboard tiles.
Render state

Loading

Stable loading state.

Agent runs

loading
Loading data
Render state

Empty

No-data state.

Agent runs

empty
No data
Render state

Error

Failed data state.

Agent runs

error
Could not load the run summary.
Render state

Public contract

The public prop table is generated from item metadata and schema-backed controls.
NameTypeDefaultDescription
title *string-Chart title.
descriptionstring-Muted supporting copy.
seriesreadonly DataSeries[][]One or more typed data series.
targetnumber-Optional horizontal reference line.
state'ready' | 'loading' | 'empty' | 'error'readyAsync data state.
messagestring-Optional async state message override.
showDotsbooleanfalseShows every point marker for inspection states.
showEndLabelsbooleantrueLabels each series endpoint.
showGridbooleantrueShows horizontal grid rules.
showXAxisbooleantrueShows sparse x-axis labels.
showYAxisbooleantrueShows y-axis tick labels.
heightnumber220SVG plot height.
legendbooleantrueShows derived legend indicators.
surface'raised' | 'sunken' | 'transparent'raisedPlot stage surface.