Component

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

Execution trend

Accepted runs and total executions.

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

Soft area chart with endpoint labels.

Execution trend

Accepted runs and total executions.

ready
Agent runsAccepted
Render state

Quiet

Transparent surface and hidden axes for compact generated UI.

Execution trend

ready
Agent runsAccepted
Render state

Dots

Inspection state with point markers.

Execution trend

Accepted runs and total executions.

ready
Agent runsAccepted
Render state

Compact

Headerless compact area for generated panels.
Render state

Loading

Stable loading state for async generated output.

Execution trend

loading
Loading data
Render state

Empty

No-data state inside the area chart shell.

Execution trend

empty
No data
Render state

Error

Failed data state with an explicit message.

Execution trend

error
Could not load execution trend.
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.
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.
stackedbooleanfalseReserved for stacked area compositions.
heightnumber220SVG plot height.
legendbooleantrueShows derived legend indicators.
surface'raised' | 'sunken' | 'transparent'raisedPlot stage surface.