BarChart

recharts 기반 바 차트 컴포넌트. 시리즈 데이터를 전달하여 단일/다중 시리즈 바 차트를 렌더링합니다.

개요

시리즈 배열 기반의 데이터 모델로 바 차트를 렌더링합니다. Foundation의 ChartContainer, ChartTooltip, ChartLegend 등 차트 유틸리티를 활용합니다.

주요 특징

✅ 다중 시리즈: 여러 시리즈를 그룹 바로 동시 표시
✅ 데이터 매핑: xName/yName으로 데이터 필드 매핑
✅ 색상 팔레트: palettes 배열로 시리즈별 색상 지정
✅ 인터랙션: 바 클릭 시 onPointClick 콜백
✅ 데이터 라벨: showDataLabel로 값 표시
✅ 천 단위 구분자: useGroupingSeparator로 Y축 포맷
✅ 빈 상태: 데이터 없을 때 안내 메시지 표시
✅ 접근성: recharts accessibilityLayer 활성화

기본 사용

series에 { dataSource, xName, yName, name } 배열을 전달합니다.


import { BarChart } from "@vortex/ui-cals"
 
const series = [
  {
    dataSource: [
      { month: "1월", sales: 350 },
      { month: "2월", sales: 480 },
      { month: "3월", sales: 620 },
    ],
    xName: "month",
    yName: "sales",
    name: "매출",
  },
]
 
<BarChart series={series} />

인터랙티브 예시

기본 차트

다중 시리즈

커스텀 팔레트

데이터 라벨 & 천 단위 구분자

포인트 클릭

바를 클릭하면 해당 데이터 정보가 콜백으로 전달됩니다.

빈 상태

데이터가 없습니다

API Reference

Props

Prop	Type	Default	Description
`series`	`BarChartSeries[]`	-	시리즈 데이터 배열
`palettes`	`string[]`	기본 8색 팔레트	시리즈별 색상 배열
`tooltip`	`boolean`	`true`	툴팁 표시 여부
`legend`	`boolean`	`true`	범례 표시 여부
`xAxisTickFormatter`	`(value: string) => string`	-	X축 틱 포맷터
`yAxisTickFormatter`	`(value: number) => string`	-	Y축 틱 포맷터
`useGroupingSeparator`	`boolean`	`false`	Y축 천 단위 구분자
`cornerRadius`	`number`	`0`	바 모서리 둥글기
`showDataLabel`	`boolean`	`false`	바 위에 데이터 라벨 표시
`showGrid`	`boolean`	`true`	그리드 라인 표시
`height`	`number`	`350`	차트 높이 (px)
`emptyText`	`string`	`"데이터가 없습니다"`	데이터 없을 때 표시 텍스트
`onPointClick`	`(data: BarChartPointClickData) => void`	-	바 클릭 시 콜백
`visible`	`boolean`	`true`	표시 여부 (false면 렌더링 안 함)
`className`	`string`	-	컨테이너에 적용할 CSS 클래스
`style`	`CSSProperties`	-	인라인 스타일
`children`	`ReactNode`	-	차트 내부 커스텀 콘텐츠 (recharts 직접 사용)

BarChartSeries

Field	Type	Required	Description
`dataSource`	`Record<string, unknown>[]`	✅	시리즈 데이터 배열
`xName`	`string`	✅	X축 데이터 키
`yName`	`string`	✅	Y축 데이터 키
`name`	`string`	-	시리즈 이름 (범례 표시)
`width`	`number`	-	바 너비

BarChartPointClickData

Prop	Type	Description
`seriesName`	`string`	클릭된 시리즈 이름
`seriesIndex`	`number`	클릭된 시리즈 인덱스
`xValue`	`unknown`	클릭된 포인트의 X값
`yValue`	`unknown`	클릭된 포인트의 Y값
`payload`	`Record<string, unknown>`	클릭된 포인트의 전체 데이터

접근성

권장 사항

✅ recharts accessibilityLayer 자동 활성화
✅ 빈 차트 시 대체 텍스트(emptyText) 제공
✅ 범례(legend)로 시리즈 구분 제공