Composition

Every chart has the same shape: a root owns data and display options, and parts are optional children.

Anatomy

<DuneChartProvider theme="dune">
  <DuneAreaChart data={data} config={config} fill="dither" pixel={2}>
    <DuneAreaChart.Grid />
    <DuneAreaChart.XAxis dataKey="month" />
    <DuneAreaChart.YAxis />
    <DuneAreaChart.Tooltip />
    <DuneAreaChart.Legend />
    <DuneAreaChart.Area dataKey="melange" stackId="ops" />
  </DuneAreaChart>
</DuneChartProvider>

Omit a child to hide it. There is no showLegend={false}. Absence is the API.

Responsibility map

Concern	Where it lives
`theme`	`DuneChartProvider` (`dune` or `night-dune`)
`data`, `config`, `fill`, `pixel`, `loading`	Chart root
Index / category axis	`XAxis` or `PolarAngleAxis` with a `dataKey`
Series	`Area`, `Bar`, `Line`, or `Radar` with a `dataKey`
Pie / radial geometry	`Pie` or `RadialBar` with `dataKey` and `nameKey`
Tooltip, legend, grid	Optional children
Extra Recharts chart props	Root `chartProps`

Series registration

Series parts must be direct children of the chart root. Do not wrap them only in a Fragment. The root reads children to build palette keys, legend names, and pixel painters.

Prefer mapping an array:

{
  keys.map((key) => <DuneAreaChart.Area key={key} dataKey={key} stackId="ops" />);
}

Loading and empty states

Set loading on the root to show a pixel skeleton. Motion respects prefers-reduced-motion.
An empty data array shows an accessible empty state. Change the copy with emptyMessage.

Escape hatch

If you need a Recharts chart prop that dune-charts does not expose, pass it on chartProps. Examples: stackOffset: 'expand', or radial startAngle / endAngle.