문서 › 차트 종류

영역 차트

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

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

움직이는 예제

이 예제의 코드

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으로 맞춥니다. 툴팁에는 비율과 원래 값이 함께 나옵니다.

움직이는 예제

이 예제의 코드

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] },
    ],
  },
});