v0.10.0

ComponentsP3 본문

ComboChart

혼합 series(막대+선)를 한 플롯에 — 카테고리 band 공유, 이중 Y축으로 단위가 다른 두 지표(절대량·비율)를 겹친다.

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

한눈에#

막대와 선을 한 플롯에 섞어 성격이 다른 두 지표를 동시에 봅니다 — 보통 절대량은 막대(매출·방문 수), 비율·추세는 선(성장률·전환율). 두 지표는 단위가 다르므로 이중 Y축(막대=좌축, 선=우축)으로 각자 독립 스케일에 그려집니다. 카테고리 x축(band)은 막대·선이 공유합니다.

월별 매출(막대)과 전월 대비 성장률(선) 데이터 표
항목1월2월3월4월5월6월
월 매출 (막대)320410380520610560
성장률 (선) · 성장률(%)828-73717-8
  • 혼합 막대+선
  • 카테고리 band 공유
  • 이중 Y축(좌/우)
  • 막대=절대량·선=비율

막대(좌축 매출)와 선(우축 성장률)이 같은 카테고리 위에 겹칩니다

선언적 방식 — type과 yAxis만#

각 시리즈에 type: 'bar' | 'line'과 (단위가 다르면) yAxis: 'right'만 선언하면 됩니다. 막대는 카테고리 밴드 안에서 그룹으로(막대 시리즈만 카운트), 선은 밴드 중심에 놓입니다. 이중 Y축·툴팁·접근성 표는 컴포넌트가 자동 처리합니다.

type와 yAxis만 선언하면 막대(좌축 매출)와 선(우축 성장률)이 한 플롯에 합성됩니다 — 이중 Y축·툴팁·접근성 표는 컴포넌트가 자동 처리합니다.

매출은 막대(좌축), 성장률은 선(우축)입니다
월별 매출(막대)과 전월 대비 성장률(선) — 이중 Y축 데이터 표
항목1월2월3월4월5월6월
월 매출 (막대)320만410만380만520만610만560만
전월 대비 성장률 (선) · 성장률(%)+8%+28%-7%+37%+17%-8%
매출 막대(좌) + 성장률 선(우) — 이중 Y축

수동 방식과의 대비 (L3 자유 슬롯)#

ComboChart가 나오기 전에는 BarChart의 **L3 자유 슬롯(svgOverlay)**에 작성자가 2차 스케일을 직접 소유해 선을 덧그렸습니다(아래 데모). 이 방식은 여전히 유효한 탈출구이지만(임의 주석·비표준 합성), 표준 막대+선 콤보라면 ComboChart 선언적 방식이 이중 Y축·접근성 표를 자동으로 주므로 더 간결합니다.

선은 매출과 다른 스케일의 성장률(%)을 L3 슬롯(svgOverlay)으로 직접 그린 오버레이입니다 — 네이티브 이중 Y축이 아니라 작성자가 2차 스케일을 소유합니다.

매출은 막대, 성장률은 그 위에 덧그린 추세선입니다
월별 매출(막대)과 전월 대비 성장률(선) — 콤보 데모 데이터 표
항목1월2월3월4월5월6월
월 매출320백만410백만380백만520백만610백만560백만
전월 대비 성장률 (오버레이 선 데이터)
월성장률
1월+8%
2월+28%
3월-7%
4월+37%
5월+17%
6월-8%
수동 방식 — BarChart + svgOverlay로 2차 스케일 직접 소유

막대 여러 개 + 선#

막대 시리즈가 둘 이상이면 카테고리 밴드 안에서 나란히(그룹) 놓이고, 선은 밴드 중심을 가로지릅니다. 선만 우축에 묶어 비율 지표로 둘 수 있습니다.

제품군 매출과 전체 성장률 데이터 표
항목1Q2Q3Q4Q
하드웨어 (막대)320410380520
소프트웨어 (막대)180260340420
성장률 (선) · 성장률(%)12341841
제품군 매출(막대 2종) + 전체 성장률(선, 우축)

접근성#

  • LineChart·BarChart와 동일하게 <figure> + 보이는 캡션 + SVG는 aria-hidden + sr-only 데이터 표(정본)입니다.
  • 데이터 표의 각 행에는 시리즈명과 함께 렌더 타입((막대)/(선))이, 우축 시리즈는 축 단위(예: · 성장률(%))가 표기돼 같은 값이라도 어느 축·어느 모양인지 구분됩니다.
  • 호버 툴팁은 WDS Tooltip 도그푸딩(마우스 전용·aria-hidden), 키보드·스크린리더 정본은 표입니다. reduced-motion에서 진입 애니메이션은 정지합니다.

데이터 API#

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

<ComboChart
  label="월별 매출과 성장률"
  series={[
    { name: '매출', type: 'bar', data: [{ label: '1월', value: 320 }] },           // 막대(좌축)
    { name: '성장률', type: 'line', yAxis: 'right', data: [{ label: '1월', value: 8 }] }, // 선(우축)
  ]}
  secondaryYAxis={{ label: '성장률(%)' }} // 우축 — 우(yAxis:'right') 시리즈가 있을 때만 활성
  curve="monotone"  // 선 보간: monotone(기본)·linear·step
  barPadding={0.4}  // 막대 그룹 밴드 내 간격(0–1)
/>
  • series[].type: 'bar'(밴드 그룹 막대) 또는 'line'(밴드 중심 선) — 한 차트에 섞습니다.
  • series[].yAxis: 'left'(기본) 또는 'right'(보조축). 'right'는 secondaryYAxis가 있을 때만 독립 스케일을 씁니다.
  • 그리드·0축 강조선은 좌축 단일 기준입니다(이중 0축 혼란 회피).

관련: BarChart · LineChart · AreaChart