v0.10.0

ComponentsP3 본문

AreaChart

누적감 있는 추세를 면적으로 — 세로 그라데이션 채움 + 선, 0 베이스라인 강제. 겹침은 ≤2, 그 이상은 누적(stacked).

마지막 업데이트 2026-06-18

한눈에#

LineChart와 같은 연속 추세이되, 면적(볼륨)감을 더합니다. 채움은 위에서 아래로 사라지는 세로 그라데이션이라 평평한 색면이 아니라 '재질'로 읽힙니다. 면적이 거짓말하지 않도록 0 베이스라인을 강제합니다.

월별 활성 사용자 데이터 표
항목1월2월3월4월5월6월7월8월
활성 사용자1,2001,6001,4502,1002,4002,2502,9003,300
  • 세로 그라데이션 채움
  • 0 베이스라인 강제
  • monotone 곡선
  • 선 + 면적

단일 시리즈에서 면적 그라데이션이 가장 깔끔합니다

겹침은 절제 — ≤2 시리즈 권장#

면적은 겹치면 진흙탕이 됩니다. 2개까지는 그라데이션 투명도로 읽히지만, 3개 이상이면 LineChart나 누적(stacked) 영역을 쓰세요(아래 참고). 겹침 차트에서는 fillOpacity를 낮춰 가독을 확보합니다.

유입 채널 비교 데이터 표
항목1주2주3주4주5주
직접320420380520610
검색180240300360440
두 시리즈 면적(투명도 조정)

누적 영역 — 겹침 대신 쌓기#

3개 이상이라 겹치면 진흙탕인 경우, stacked로 쌓으면 전체 합계와 각 구성비를 깔끔하게 보입니다. 누적은 결측을 0으로 채워 정렬하고, 곡선 가장자리가 아래 띠의 상단과 정확히 맞물립니다. 표·툴팁은 원본 값(누적값 아님)을 유지합니다.

채널별 월 트래픽 — 누적 데이터 표
항목1월2월3월4월5월6월
검색320410380520560610
소셜180240300340380420
직접120150180210250300
채널별 월 트래픽 누적(합계·구성비)

스케일 — 시간(time)·로그(log)#

AreaChart도 LineChart와 같은 연속 축이라 xScaleKind="time"(x=epoch ms, 달력 nice 눈금)·yScaleKind="log"(밑 10)을 지원합니다. 시계열 면적이 가장 흔한 쓰임입니다. 로그축은 0이 도메인 밖이라 채움 바닥이 플롯 하단으로 가는데, 면적은 0 기준 누적감을 전달하므로 로그 면적은 신중히 쓰세요(추세 비교는 LineChart의 로그축이 더 정직합니다). 기본은 둘 다 linear입니다. 자세한 동작은 LineChart의 스케일 섹션을 참고하세요.

이중 Y축 — 단위가 다른 두 지표#

AreaChart도 LineChart와 같이 이중 Y축을 지원합니다. 시리즈에 yAxis: 'right' + secondaryYAxis를 주면 우측 보조축의 독립 스케일로 그려집니다. 우 시리즈의 면적 채움 바닥은 우축 도메인 기준(우 도메인에 0이 있으면 우축 0, 아니면 플롯 하단)으로 계산돼 면적이 거짓말하지 않으며, 0축 강조선·그리드는 1차(좌)축 단일 기준입니다(이중 0축 혼란 회피). 단위가 다른 두 면적이 겹치면 채움 투명도(fillOpacity)를 낮춰 가독성을 확보하세요.

단위가 다른 매출(만 원)과 성장률(%)을 한 플롯에 겹쳤습니다. 성장률 시리즈에 yAxis: 'right'를 주면 우측 보조축의 독립 스케일로 그려집니다 — 같은 축에 두면 성장률이 0선에 깔리지만, 이중 축은 두 추세를 또렷이 비교하게 합니다. 그리드·0축선은 좌축 단일 기준입니다(이중 0축 혼란 회피).

좌축=매출(만 원)·우축=성장률(%). 그리드·0축은 좌축 단일 기준입니다.
월별 매출(좌, 만 원) + 성장률(우, %) — 이중 Y축 데이터 표
항목1월2월3월4월5월6월
매출1,200만1,850만1,500만2,400만2,100만3,000만
성장률 (성장률(%))+8%+54%-19%+60%-13%+43%
매출(좌, 만 원) + 성장률(우, %) · line↔area — 라이브

자세한 동작·접근성 표 단위 구분은 LineChart의 이중 Y축 섹션을 참고하세요. 막대 이중축·막대+선 콤보 1급은 후속 Phase입니다(ADR-019).

접근성#

  • LineChart·BarChart와 동일한 모델: <figure> + 보이는 캡션 + SVG aria-hidden + sr-only 데이터 표(정본).
  • 면적 채움 위에 선을 겹쳐 경계를 분명히 하고, 범례 텍스트로 시리즈를 구분합니다.
  • 호버 툴팁은 WDS Tooltip 도그푸딩, reduced-motion에서 진입 애니메이션 정지.

데이터 API#

import { AreaChart } from '@wds/ui-web';

<AreaChart
  label="월별 활성 사용자"
  series={[
    { name: '활성 사용자', data: [{ x: 0, y: 1200 }, { x: 1, y: 1600 }] },
  ]}
  xFormat={(i) => `${i + 1}월`}
  fillOpacity={0.22}   // 그라데이션 상단 불투명도(기본 0.22)
  stacked={false}      // true면 시리즈를 쌓아 합계·구성비 표시(3+ 시리즈에 적합)
/>

관련: LineChart · BarChart