Cartesian
AreaChart
Area chart for time, numeric, or categorical x-values. Supports basic fills, stepped curves, stacked totals, and 100% expanded comparisons.
Examples
Interactive
| date | Desktop | Mobile |
|---|---|---|
| Apr 1 | 222 | 150 |
| Apr 8 | 248 | 178 |
| Apr 15 | 301 | 212 |
| Apr 22 | 277 | 236 |
| Apr 29 | 336 | 264 |
| May 6 | 365 | 311 |
<AreaChart
title="Area Chart - Interactive"
xKey="date"
data={traffic}
series={[
{key: 'desktop', label: 'Desktop'},
{key: 'mobile', label: 'Mobile'}
]}
metrics={[
{label: 'Desktop', value: '1,749', color: 'var(--uin-chart-1)'},
{label: 'Mobile', value: '1,351', color: 'var(--uin-chart-2)'}
]}
/>Stacked
| month | Desktop | Mobile | Tablet |
|---|---|---|---|
| Jan | 186 | 80 | 42 |
| Feb | 305 | 200 | 72 |
| Mar | 237 | 120 | 54 |
| Apr | 273 | 190 | 66 |
| May | 209 | 130 | 58 |
| Jun | 214 | 140 | 63 |
<AreaChart
title="Area Chart - Stacked"
xKey="month"
data={areaMix}
stacked
series={[
{key: 'desktop', label: 'Desktop'},
{key: 'mobile', label: 'Mobile'},
{key: 'tablet', label: 'Tablet'}
]}
/>Expanded
| month | Desktop | Mobile | Tablet |
|---|---|---|---|
| Jan | 186 | 80 | 42 |
| Feb | 305 | 200 | 72 |
| Mar | 237 | 120 | 54 |
| Apr | 273 | 190 | 66 |
| May | 209 | 130 | 58 |
| Jun | 214 | 140 | 63 |
<AreaChart
title="Area Chart - Expanded"
xKey="month"
data={areaMix}
expanded
series={[
{key: 'desktop', label: 'Desktop'},
{key: 'mobile', label: 'Mobile'},
{key: 'tablet', label: 'Tablet'}
]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
data | ChartDatum[] | — | Rows to plot. Each row must include the xKey and every series key. |
series | ChartSeries[] | — | Series config with key, label, color, icon, and unit metadata. |
xKey | string | 'x' | Field used for the x-axis value. |
curve | 'linear' | 'monotone' | 'step' | 'monotone' | D3 curve interpolation for the area and top line. |
stacked | boolean | false | Stack series on top of each other. |
expanded | boolean | false | Render a 100% stacked area chart. |
metrics | ChartMetric[] | [] | Optional header metrics rendered by ChartFrame. |
Install
CLI
npm install d3-array d3-scale d3-shape
npx @a3tai/mittsu add area-chart --registry ./packages/charts/registry.json