# Area chart

> Volume and totals: areas, stacked and 100% stacked.

Source: https://82chart.com/en/docs/area/

`type: 'area'` fills under the line with a soft gradient (`gradient: false` turns it off), and its y axis always starts at zero. Use `stacked: true` when the total matters and `stacked: 'percent'` when the shares do.

```js
createChart('#chart', {
  type: 'area',
  title: 'Visits by source',
  stacked: true,
  data: {
    labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    series: [
      { name: 'Search', data: [5200, 5600, 5900, 6100, 5800, 4200, 3900] },
      { name: 'Social', data: [2100, 2300, 2600, 2400, 2900, 3800, 4100] },
      { name: 'Direct', data: [1400, 1500, 1450, 1600, 1550, 1100, 980] },
    ],
  },
});
```

## 100% stacked

Each x adds up to 100. The tooltip shows the share and the original value.

```js
createChart('#chart', {
  type: 'area',
  title: 'Device share',
  stacked: 'percent',
  data: {
    labels: ['2026-05', '2026-06', '2026-07', '2026-08', '2026-09', '2026-10'],
    series: [
      { name: 'Phone', data: [61, 63, 64, 66, 67, 69] },
      { name: 'Desktop', data: [33, 31, 31, 29, 28, 26] },
      { name: 'Tablet', data: [6, 6, 5, 5, 5, 5] },
    ],
  },
});
```

> Avoid stacking more than three areas: the upper bands inherit the shape of the ones below and become hard to read.