v0.10.0

ComponentsP3 본문

BarChart

카테고리별 절대량을 막대로 — 둥근 막대, 0 베이스라인 강제, 그룹·누적(stacked)·가로(horizontal) 지원.

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

한눈에#

카테고리(달·지역·제품 등)별 절대량 비교에 적합합니다. 막대는 상단만 둥글고(squircle 정합), 면적이 거짓말하지 않도록 0 베이스라인을 강제합니다. 시리즈 색은 색맹 안전 차트 토큰을 자동으로 씁니다.

분기별 매출 (백만원) 데이터 표
항목1분기2분기3분기4분기
매출320480410590
  • 카테고리 x축
  • 0 베이스라인 강제
  • 상단만 둥근 막대
  • 그룹 막대 지원

막대에 마우스를 올리면 그 달의 값이 툴팁으로 뜹니다

그룹 막대 — 다중 시리즈#

여러 시리즈는 카테고리 밴드 안에서 나란히(그룹) 놓입니다. 범례 텍스트로 시리즈를 구분합니다. legendToggle을 켜면 범례 항목을 클릭해 해당 시리즈를 숨기거나 되돌릴 수 있습니다 — 숨기면 범례가 디밍되고 남은 시리즈로 그룹이 재배치됩니다.

제품군별 분기 매출 데이터 표
항목1Q2Q3Q4Q
하드웨어320410380520
소프트웨어180260340420
제품군별 분기 매출 — 범례 클릭으로 시리즈 토글

누적 막대 — 합계와 구성비#

stacked를 켜면 시리즈를 카테고리마다 위로 쌓아 전체 합계와 각 구성비를 한눈에 보입니다(그룹은 개별 비교에, 누적은 합계 추이에 적합). 같은 데이터, 다른 렌더입니다. 누적은 전폭 막대로 쌓이고 최상단 세그먼트만 둥근 상단입니다.

채널별 분기 방문 — 그룹 데이터 표
항목1Q2Q3Q4Q
검색320410380520
소셜180260340300
직접120150200260
채널별 분기 방문 — 누적 데이터 표
항목1Q2Q3Q4Q
검색320410380520
소셜180260340300
직접120150200260
그룹(개별 비교) · 누적(합계·구성비)

가로 막대 — 순위·긴 라벨#

horizontal을 켜면 카테고리가 세로축, 값이 가로축으로 전치됩니다. 카테고리 라벨이 길거나(부서·국가명) 순위 비교가 핵심일 때 읽기 쉽습니다. 막대는 좌(원점)에서 우로 자라고 오른쪽 끝만 둥글며, 그룹·누적도 그대로 동작합니다.

지역별 매출 순위 데이터 표
항목서울경기부산대구광주
매출920740480360250
지역별 매출 순위 (가로)
지역별 채널 구성 (가로 누적) 데이터 표
항목서울경기부산
검색420360240
소셜300240160
직접20014080
가로 누적 — 지역별 채널 구성비

음수 값#

값이 음수면 0축이 플롯 중앙으로 오고, 막대는 0축 아래로 자랍니다(--wds-color-border-strong로 0축 강조).

전월 대비 증감 데이터 표
항목1월2월3월4월5월
증감40-2560-1530
전월 대비 증감

긴 라벨 — x축 회전 + 수직 그리드#

카테고리 라벨이 길어 겹치면 xLabelRotate(도, 음수=반시계)로 비스듬히 눕힙니다. 회전 각·최장 라벨 길이로 하단 여백이 자동 확장돼 라벨이 잘리지 않습니다(회전 0은 기본 여백 그대로). showVerticalGrid는 카테고리 위치에 수직 보조선을 더합니다(기본 off, 수평 그리드와 동일 토큰).

지역별 매출 — 긴 라벨 회전 데이터 표
항목서울특별시부산광역시인천광역시대전광역시광주광역시
매출320280210180160
긴 카테고리 라벨을 -35° 회전 + 수직 그리드

콤보 — 막대 + 선 (L3 자유 슬롯)#

"라이브러리의 제한된 수정"을 넘는 자유 커스터마이징의 대표 사례입니다. 매출은 막대로, 전월 대비 성장률은 그 위에 선으로 — 두 지표의 스케일이 다릅니다. WDS는 네이티브 이중 Y축을 강요하지 않는 대신, L3 자유 슬롯(svgOverlay)에 플롯 좌표계를 넘겨 작성자가 2차 스케일을 직접 소유하고 데이터에 앵커해 그리도록 합니다. 오버레이는 aria-hidden이라 성장률 데이터는 sr-only 표로 병렬 노출합니다.

선은 매출과 다른 스케일의 성장률(%)을 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%
월 매출(막대) + 전월 대비 성장률(선)

접근성#

  • LineChart와 동일하게 <figure> + 보이는 캡션 + SVG는 aria-hidden + sr-only 데이터 표(정본)입니다.
  • 막대는 위치·축 라벨로 이미 구분되며, 다중 시리즈는 범례 텍스트로 식별합니다.
  • 호버 툴팁은 WDS Tooltip 도그푸딩, reduced-motion에서 진입 애니메이션 정지.

데이터 API#

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

<BarChart
  label="분기별 매출"
  series={[
    { name: '매출', data: [{ label: '1분기', value: 320 }, { label: '2분기', value: 480 }] },
  ]}
  barPadding={0.4}   // 0–1, 막대 사이 간격 비율(기본 0.4)
  stacked={false}    // true면 시리즈를 쌓아 합계 표시(기본 그룹/나란히)
  horizontal={false} // true면 카테고리=세로·값=가로로 전치(순위·긴 라벨)
/>

관련: LineChart · AreaChart