데이터 시각화

Bar · Ranking

범주 간 크기를 비교합니다. 막대 위쪽 모서리만 둥글게 처리하고, 마우스를 올린 범주 외에는 흐리게 해 비교 대상을 분명히 합니다.

D3 모듈
scaleBand · scaleLinear · stack
등장
높이 성장 720ms

단일 계열 · 오늘 강조

highlightLast를 켜면 마지막 막대만 브랜드 색, 나머지는 연한 톤으로 표시됩니다.

Grouped

  • POS
  • 키오스크
  • QR

Stacked

전체 합계와 구성을 함께 볼 때. 툴팁에 합계가 추가됩니다.

  • POS
  • 키오스크
  • QR

Ranking (가로 막대)

순위 · 항목명이 긴 경우. 값 내림차순으로 자동 정렬되고, 순위가 내려갈수록 불투명도가 낮아집니다.

스펙

요소값
막대 간격단일 42% · 그룹 28% (paddingInner)
라운드min(6px, 막대 폭/4), 위쪽만
hover다른 범주 opacity 0.35
가로 막대행 44px · 트랙 10px (--bg-muted)

사용 규칙

이렇게 하세요

  • y축은 반드시 0부터
  • 범주 12개 이하 (넘으면 Ranking · 스크롤)
  • 스택은 3–4개 계열까지

이렇게 하지 마세요

  • 막대마다 다른 색 (의미 없는 색 구분)
  • 그룹 + 스택 동시 사용
  • 값 라벨과 Y축 동시에 과도하게 표시

Props

PropTypeDefault설명
data*{ label: string; [key]: number }[]—범주별 데이터
keys*{ key; label; color? }[]—계열 정의
mode"grouped" | "stacked""grouped"다중 계열 방식
highlightLastboolean—마지막 막대 강조 (단일 계열)
showValuesboolean—막대 위 값 라벨
RankingBars.data{ label; value; sub? }[]—가로 순위 막대