Primitive

Chart Frame

Framed chart output region with surface state, chart-kind hooks, and state messages.

Use ChartFrame for the visible plot container. Components own data, scaling, routing, and chart state; lower chart primitives own SVG marks and non-SVG chart grids.
data
DOM renderImage render
Chart FrameDefault

Playground

Controls update query params directly, so every primitive state can be linked, rendered, and screenshotted deterministically.

Loading playground

Rendered matrix

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

Default

Raised chart frame for generated chart output.
Render state

Message

State message inside a chart frame.
Loading data
Render state

Public contract

The public prop table is generated from item metadata and schema-backed controls.
NameTypeDefaultDescription
ChartFrame.surface'raised' | 'sunken' | 'transparent'raisedSurface treatment.
ChartFrame.kindChartFrameKindlineChart kind marker for styling hooks.
ChartFrame.heightnumber | string-Surface height token or runtime chart height.
ChartMessage.childrenReactNode-Empty, loading, or error message.