---
url: https://chartbuddy.io/embed/docs/chart-types/stacked-area.md
---
# Stacked area

Filled stacked series over an ordered domain (absolute or normalised to 100%).

## Identity

| | |
|---|---|
| `chartType` | `stackedArea` · `stackedArea100` |
| Option bag | `area` |
| `seriesData` layout | `seriesRows` – row 0 = category header; later rows = series |
| Min grid | 2 rows × 2 columns (header included) |
| Orientation | Yes – `vertical` (default) or `horizontal` |
| Sample | [Stacked area](/samples/stacked-area) |

***

## Minimal `chartData`

```js
{
  chartType: 'stackedArea', // or 'stackedArea100'
  isDataTransposed: true,
  seriesData: [
    ['', 'Q1', 'Q2', 'Q3', 'Q4'],
    ['Series A', 20, 28, 26, 32],
    ['Series B', 12, 14, 18, 16],
  ],
  title: { visible: true, text: 'Area mix' },
  subtitle: { visible: false, text: '' },
}
```

***

## `seriesData`

Same `seriesRows` layout as line / bar (`isDataTransposed: true`):

```js
[
  ['', 'Q1', 'Q2', 'Q3', 'Q4'],
  ['Series A', 20, 28, 26, 32],
  ['Series B', 12, 14, 18, 16],
]
```

Shared layout rules: [chartData schema · seriesData](/api/chart-data#seriesdata-layouts).

***

## Option bag: `area`

Both stacked area types read **`cd.area`**.

| Field | Default (new charts) | Role |
|---|---|---|
| `width` | `2` | Stroke width (px) |
| `strokeDashArray` | `''` | Dash pattern |
| `drawPoints` | `false` | Point markers on the upper edge |
| `curveParameter` | `1` | Curve tension (same idea as line smoothness) |
| `fillOpacity` | `0.6` | Solid fill opacity |
| `fillType` | `'solid'` | `'solid'` | `'gradient'` |
| `fillOpacityTop` / `fillOpacityBottom` | `0.35` / `0.05` | Gradient stops when `fillType: 'gradient'` |
| `gradientTarget` | `'transparent'` | Gradient fade target |
| `strokeOpacity` | `1` | Stroke opacity |
| `shadowIntensity` | `0` | Soft shadow |
| `pointMarker` | (same shape as line) | Markers when `drawPoints` is on |
| `dataLabels` / `overrides` | empty | Label / style patches |

```js
{
  chartType: 'stackedArea',
  seriesData: [/* … */],
  area: {
    fillOpacity: 0.45,
    drawPoints: false,
  },
}
```

Markers: [Point markers](/configuration/point-markers).

***

## Axes & scales

| Role | Vertical | Horizontal |
|---|---|---|
| Domain | `bottom` | `left` |
| Primary range | `left` | `bottom` |

* Absolute stacks (`stackedArea`) usually keep **0 in range**.
* `stackedArea100` uses a **0–100** `%` value axis (same interval rules as other 100% types).
* Secondary axis is uncommon; prefer [line](/chart-types/line) or [combo](/chart-types/combo) for dual units.

Details: [Axes · by chart type](/axes/by-chart-type) · [Percent axis sample](/samples/percent-axis).

***

## Type-specific behaviour

* Do not put area options on `cd.line` – that is a foreign bag.
* Palette: `legend.colors`.

***

## Pitfalls

* Using `chartType: 'line'` with `area: {…}` (or the reverse)
* Expecting a single non-stacked “area chart” type – public types are the stacked variants
* Fighting 0–100 bounds / tick intervals on `stackedArea100`
* Turning on `drawPoints` without checking marker clutter on dense domains

***

## Related

* [Line](/chart-types/line) · [Stacked bar](/chart-types/stacked-bar)
* [chartData schema](/api/chart-data) · [Axes](/axes/)
* Sample: [Stacked area](/samples/stacked-area)