막대 차트

카테고리별 값을 세로 막대로 비교하는 표현 전용 차트(음수 없음 가정). 막대는 얇게(≤24px)·데이터 끝만 둥글고, 격자선은 실선 헤어라인이다. 계열이 여러 개면 그룹(나란히) 또는 stacked(누적)로, 2계열 이상이면 범례가 자동으로 붙는다.

상태

0100200300

1분기2분기3분기4분기

단일 계열

올해작년

0100200300

1분기2분기3분기4분기

그룹 (다계열)

신규재구매

0100200300

1분기2분기3분기4분기

누적 (stacked)

활용 방법

분기별 매출 구성 (누적)

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

Preview

신규재구매제휴

0만100만200만300만

1분기2분기3분기4분기

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}만`}
/>

속성

이름	타입	기본값	설명
categories	string[]	-	x축 카테고리 라벨
series	BarSeries[]	-	계열 배열: { label, values(categories 와 같은 길이), tone? }
stacked	boolean	false	true=누적, false=그룹(나란히)
height	number	200	플롯 영역 높이(px)
formatValue	(v: number) => string	ko-KR 콤마	y축·툴팁 값 포맷