Runtime and layout
Compose a Cartesian chart yourself: one root, one plot, and the marks inside it.
ChartChartPlotuseCartesianChartModeluseChartState
createCartesianChartModel or useCartesianChartModel keeps an accepted data frame, source rows, measurements and interaction state together. Pass the model to Chart, ChartPlot and bound marks. A plot supplies measured geometry; its height, compact height and margins live on ChartPlot. One active plot is supported per chart root.
Model actions work before a plot mounts and after it unmounts. A controlled model usescontrol inputs and request callbacks: calling pin, changing visible series or comparing a range requests a change; state updates when the owner supplies the resolved value. summarize queries accepted rows with an explicit measure, scope, aggregation and missing-value policy.
TypeScript
const model = useCartesianChartModel({ data: rows, x, y, series });
const inspection = useChartState(model, state => state.inspection);
const comparison = useChartState(model, state => state.comparison);
<Chart model={model} aria-label="Revenue" compare>
<header>{inspection?.formattedX ?? 'Revenue'}</header>
<ChartPlot model={model} height={300}>
<Line model={model} series="revenue" />
</ChartPlot>
<Legend model={model} />
</Chart>