DcBarChart

Dark Mode

수직 바 차트 컴포넌트입니다. 기본(단일/다중), 컬러(항목별 색상), 히스토그램(좁은 바 밀집) 3가지 variant를 지원합니다.

import { DcBarChart } from "@/shared/ui/widget/analytics/chart"

인터랙티브 데모

Variant를 전환하며 바 차트의 다양한 형태를 확인하세요.

tsx

<DcBarChart
  data={data}
  bars={[{ dataKey: "value", name: "매출", color: CHART_COLORS.primary }]}
  height={280}
/>

4가지 variant를 제공합니다.

Default

Colored

Histogram

Stacked Strip

Prop	Type	Required	Default	설명
`data`	`Record<string, unknown>[]`	✓	—	차트 데이터 배열
`bars`	`BarConfig[]` interface BarConfig { dataKey: string; color?: string; name?: string; stackId?: string; radius?: [number, number, number, number]; }	✓	—	바 설정 목록
`xKey`	`string`	—	"name"	X축 데이터 키
`variant`	`"default" \| "colored" \| "histogram" \| "stacked"`	—	"default"	차트 변형 (default: 둥근 상단 바, colored: 항목별 컬러, histogram: pill 밀집 분포, stacked: pill 적층 strip)
`barSize`	`number`	—	—	바 너비 (px). histogram은 기본 6
`barGap`	`number`	—	4	바 간격
`height`	`number`	—	300	차트 높이 (px)
`showXAxis`	`boolean`	—	true	X축 표시 여부
`showYAxis`	`boolean`	—	true	Y축 표시 여부
`showGrid`	`boolean`	—	true	그리드 표시 여부
`showTooltip`	`boolean`	—	true	툴팁 표시 여부
`formatter`	`(value: number) => string`	—	—	툴팁 값 포맷터
`className`	`string`	—	—	추가 CSS 클래스