Chart.Root

Measures the box, derives the scales, owns the active datum. Every other part draws into it.

Chart of Projects published, Proposals accepted over 6 points
month	Projects published	Proposals accepted
January	24	18
February	31	22
March	28	25
April	35	30
May	42	36
June	38	33

<Chart.Root
	config={config}
	data={data}
	x={{ key: "month" }}
	y={{ keys: ["projects", "bookings"] }}
	margin={{ top: 8, right: 8, bottom: 52, left: 40 }}
>
	<Chart.Grid />
	<Chart.XAxis />
	<Chart.YAxis />
	<Chart.Cursor />
	<Chart.Bars />
	<Chart.Tooltip />
	<Chart.Legend />
</Chart.Root>;

margin is manual: axes and the legend are drawn inside the root's box, so leave about 40px left for a y axis, 28px bottom for an x axis, and 24px more for a bottom legend.

API

Prop	Type	Default
`config`	`ChartConfig`	required	Per-series labels, colours and icons.
`children`	`ReactNode`	—	The marks and axes. Drawn in order, so what comes last sits on top.
`data`	`readonly ChartDatum[]`	`[]`	The rows to plot, in the order they should appear along the category axis.
`interactive`	`boolean`	`true`	Turns pointer scrubbing and keyboard navigation off.
`margin`	`Partial<ChartMargin>`	—	Space reserved around the plot for the axes and the legend. A clipped axis label almost always means this needs more room on that side.
`orientation`	`ChartOrientation`	`"vertical"`	`horizontal` puts the categories down the side.
`x`	`ChartCategorySpec`	—	The category axis: which field names each row.
`y`	`ChartValueSpec`	—	The value axis: which fields are plotted, and how they combine.

Plus every <div> prop. Source: chart/components/chart-root.tsx.

x and y are what turn your rows into scales; everything drawn inside reads them. data is plotted in the order you give it — the root never sorts.

Chart.Style

Prop	Type	Default
`config`	`ChartConfig`	required	The series config to emit `--color-*` custom properties from.
`id`	`string`	required	The chart instance this stylesheet belongs to, so its variables stay scoped.

Plus the DOM props of the element it renders. Source: chart/components/chart-style.tsx.

Emits the --color-* custom properties for a chart's series, scoped to that one instance. Chart.Root renders it for you; you only need it directly when building a mark of your own outside the root.