# 영역 차트

> 양과 합계를 함께 보는 영역, 누적, 100% 누적.

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

영역 차트란 선 차트의 선 아래를 색으로 채워, 시간에 따른 변화와 함께 양의 크기를 보여 주는 차트입니다. 여러 시리즈를 쌓으면 전체 합계와 구성이 어떻게 바뀌는지 함께 볼 수 있습니다.

`type: 'area'` 는 선 아래를 옅게 칠합니다(약한 그라디언트, `gradient: false` 로 끄기). y축은 항상 0에서 시작합니다. 여러 시리즈의 합이 중요하면 `stacked: true`, 비율이 중요하면 `stacked: 'percent'` 입니다.

```js
createChart('#chart', {
  type: 'area',
  title: '유입 경로별 방문',
  stacked: true,
  unit: '명',
  data: {
    labels: ['월', '화', '수', '목', '금', '토', '일'],
    series: [
      { name: '검색', data: [5200, 5600, 5900, 6100, 5800, 4200, 3900] },
      { name: 'SNS', data: [2100, 2300, 2600, 2400, 2900, 3800, 4100] },
      { name: '직접', data: [1400, 1500, 1450, 1600, 1550, 1100, 980] },
    ],
  },
});
```

## 100% 누적

각 x에서 합을 100으로 맞춥니다. 툴팁에는 비율과 원래 값이 함께 나옵니다.

```js
createChart('#chart', {
  type: 'area',
  title: '기기 비율',
  stacked: 'percent',
  data: {
    labels: ['2026-05', '2026-06', '2026-07', '2026-08', '2026-09', '2026-10'],
    series: [
      { name: '휴대폰', data: [61, 63, 64, 66, 67, 69] },
      { name: 'PC', data: [33, 31, 31, 29, 28, 26] },
      { name: '태블릿', data: [6, 6, 5, 5, 5, 5] },
    ],
  },
});
```

> 영역 차트에서 겹치는 시리즈를 3개 넘게 쌓지 않는 것이 좋습니다. 많아지면 위쪽 영역의 모양이 아래 영역에 끌려가 읽기 어렵습니다.

## 자주 묻는 질문

### 누적 영역과 100% 누적 영역은 언제 쓰나요?

전체 합계가 중요하면 `stacked: true`(위 끝이 합계), 각 부분의 비율이 중요하면 `stacked: 'percent'`(늘 100%)입니다. 100% 누적의 툴팁에는 비율과 원래 값이 함께 나옵니다.

### 영역 차트의 y축이 0부터 시작하는 이유는?

영역 차트는 칠한 넓이가 값을 나타내므로, 0이 아닌 곳에서 시작하면 양이 부풀려 보입니다. 그래서 82chart의 영역 차트는 y축이 항상 0에서 시작합니다. 작은 변화를 확대해 보려면 선 차트를 쓰세요.