데이터 시각화

Combo (이중 축)

단위가 다른 두 지표(금액 · 건수)를 한 차트에서 비교합니다. 막대는 왼쪽 축(금액), 선은 오른쪽 축(건수)을 따르며, 오른쪽 축 라벨은 선 색으로 구분합니다.

월별 결제금액 · 건수

  • 결제금액
  • 결제건수

이중 축 주의

두 축의 눈금 비율은 임의로 정해지므로 ‘선이 막대보다 높다’는 비교는 의미가 없습니다. 객단가처럼 두 지표의 관계가 핵심이라면 별도 지표(금액 ÷ 건수)를 라인 차트로 보여주세요.

사용 규칙

이렇게 하세요

  • 단위가 다른 두 지표에만 사용
  • 막대는 연한 톤, 선은 선명한 색
  • 오른쪽 축 라벨을 선 색으로

이렇게 하지 마세요

  • 같은 단위 두 지표에 이중 축
  • 세 개 이상 지표 결합
  • 두 계열 모두 막대

Props

PropTypeDefault설명
data*{ label; bar: number; line: number }[]—범주별 두 지표
barLabel · lineLabelstring"결제금액" · "결제건수"범례 · 툴팁 라벨
heightnumber300높이