본문으로 건너뛰기
데이터 시각화

막대 차트

카테고리별 값을 세로 막대로 비교하는 표현 전용 차트. 막대는 얇게(≤24px)·데이터 끝만 둥글고, 격자선은 실선 헤어라인이다. 음수는 0 기준선 아래로 내려간다(손익 · 증감 · 예산 대비). 계열이 여러 개면 그룹(나란히) 또는 stacked(누적)로, 누적은 양수 · 음수를 0 위아래로 따로 쌓는다. 2계열 이상이면 범례가 자동으로 붙는다.

상태

단일 계열
그룹 (다계열)
누적 (stacked)
음수 (증감)

활용 방법

분기별 매출 구성 (누적)

stacked 를 주면 계열이 아래→위로 누적되고, 세그먼트 사이는 2px 서페이스 갭으로 구분된다. hover 하면 계열별 값 + 합계가 title 로 나온다.

Preview
tsx
<BarChart
  height={200}
  stacked
  categories={["1분기", "2분기", "3분기", "4분기"]}
  series={[
    { label: "신규", values: [60, 90, 70, 120] },
    { label: "재구매", values: [60, 100, 80, 120] },
    { label: "제휴", values: [20, 30, 25, 40] },
  ]}
  formatValue={(v) => `${v}만`}
/>

월 예산 기준선 (references)

기준선을 넘은 달이 한눈에 보인다. 음수 데이터가 없으면 축 바닥은 0 이라 음수 기준값은 축을 넓히지 않는다.

Preview
tsx
<BarChart
  categories={months}
  series={[{ label: "경비", values }]}
  references={[{ label: "월 예산", value: 450, tone: "danger" }]}
  formatValue={(v) => `${v}만`}
/>

월별 손익 구성 (누적, 양수 · 음수)

누적에서 양수는 0 위로, 음수는 0 아래로 계열 순서대로 따로 쌓인다. 툴팁의 합계는 양수와 음수를 더한 순합(그달의 순이익)이다. 음수 데이터가 있을 때만 축이 0 아래로 열린다.

Preview
tsx
<BarChart
  stacked
  categories={months}
  series={[
    { label: "매출", values: sales },
    { label: "기타 수익", values: other },
    { label: "인건비", values: payroll.map((v) => -v) },
    { label: "운영비", values: opex.map((v) => -v) },
  ]}
  formatValue={(v) => `${v}만`}
/>

속성

이름타입기본값설명
categoriesstring[]-x축 카테고리 라벨
seriesBarSeries[]-계열 배열: { label, values(categories 와 같은 길이, 음수는 0 아래로), tone? }
stackedbooleanfalsetrue=누적, false=그룹(나란히)
heightnumber200플롯 영역 높이(px)
formatValue(v: number) => stringko-KR 콤마y축·툴팁 값 포맷
referencesChartReference[]-기준선 { label, value, tone? } · 기준 구간 { label, from, to, tone? }. 점선 · 옅은 면으로 그리고 축 범위가 이 값을 포함한다
series[].hrefs(string | undefined)[]-values 와 같은 자리의 링크. 묶음이면 막대 자리 전체 높이, 쌓기면 그 토막을 눌러 그 값의 목록으로 간다