Area chart
Trends and stacked volumes with crest-to-depth fills.
Use area charts for continuous series over a category or time axis. Stack series with a shared stackId. Fill modes: dither or bands.
AreaSingle-stack melange + water.
Examples
Stacked
Share stackId on each <DuneAreaChart.Area />.
Stacked areaAll series share one stack.
Solid bands
Use fill="bands" for stepped ribbons without Bayer grain.
Bands fillSolid crest-to-depth ribbons.
Loading
Set loading on the root to show a pixel skeleton until data is ready.
Loading…
Parts
| Part | Role |
|---|---|
DuneAreaChart | Root: data, config, fill, pixel, loading, chartProps |
DuneAreaChart.Grid | Cartesian grid |
DuneAreaChart.XAxis | Category / index axis (dataKey required for categories) |
DuneAreaChart.YAxis | Value axis |
DuneAreaChart.Tooltip | Hover tooltip |
DuneAreaChart.Legend | Series legend |
DuneAreaChart.Area | One series (dataKey, optional stackId, type) |
Props
Root
| Prop | Type | Default | Notes |
|---|---|---|---|
data | Record<string, unknown>[] | required | Row objects |
config | Record<string, DuneSeriesConfig> | - | Labels and colors |
fill | "bands" | "dither" | "bands" | Pixel fill mode |
pixel | number | 2 | Cell size in CSS px |
loading | boolean | false | Pixel skeleton |
emptyMessage | string | - | Empty-state copy |
chartProps | object | - | Extra Recharts AreaChart props |
className | string | - | Wrapper class |
Area
| Prop | Type | Notes |
|---|---|---|
dataKey | string | Series field on each row |
stackId | string | Shared id stacks series |
type | Recharts curve type | For example monotone |
name | string | Overrides legend name |
isAnimationActive | boolean | Series animation |
Tips
- Prefer dither for marketing UI. Prefer bands for dense dashboards.
- Keep
pixelat2unless you want a stronger pixel-art look. - Put every
Areaas a direct child of the root. See Composition.