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

Variants

4가지 variant를 제공합니다.

Default

Colored

Histogram

Stacked Strip

Horizontal Layout

layout="horizontal"로 가로 막대 차트를 만들 수 있습니다. 도메인별 금액 비교 등에 적합합니다.

tsx

<DcBarChart
  data={data}
  bars={[{ dataKey: "value", name: "금액", color: CHART_COLORS.primary }]}
  layout="horizontal"
  height={280}
  labelList={{ formatter: (v) => `${v}억`, position: "right" }}
  margin={{ top: 10, right: 60, left: 20, bottom: 0 }}
/>

Props

DcBarChart

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)
`layout`	`"vertical" \| "horizontal"`	—	"vertical"	세로 막대(vertical) 또는 가로 막대(horizontal). horizontal 시 XAxis/YAxis 역할 자동 교체
`barSize`	`number`	—	—	바 너비 (px). histogram은 기본 3
`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`	—	—	툴팁 값 포맷터
`labelList`	`LabelListConfig \| LabelListConfig[]` interface LabelListConfig { dataKey?: string; position?: "top" \| "bottom" \| "left" \| "right" \| "inside"; formatter?: (value: number) => string; style?: React.CSSProperties; content?: React.ReactElement; }	—	—	바에 LabelList 추가. 단일 또는 bars 순서 배열
`margin`	`{ top?: number; right?: number; bottom?: number; left?: number }`	—	—	Recharts margin override
`className`	`string`	—	—	추가 CSS 클래스