Analytics

Chart

Dark Mode

Recharts 기반 차트 시스템의 부모 컴포넌트입니다. ChartContainer(반응형 래퍼), ChartTooltip(커스텀 툴팁), 디자인 토큰 기반 색상 팔레트 등 공용 유틸리티를 제공합니다.

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

인터랙티브 데모

4종 차트를 전환하며 미리 볼 수 있습니다.

tsx

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

각 차트 유형의 상세 문서는 하위 페이지에서 확인할 수 있습니다.

Prop	Type	Required	Default	설명
`children`	`ReactNode`	✓	—	차트 콘텐츠 (Recharts 컴포넌트)
`height`	`number`	—	300	차트 컨테이너 높이 (px)
`className`	`string`	—	—	추가 CSS 클래스

Prop	Type	Required	Default	설명
`name`	`string`	✓	—	항목 이름
`value`	`string`	✓	—	항목 값
`color`	`string`	—	—	좌측 Dot 색상 (CSS color)