DcDonutChart

Dark Mode

도넛 차트 컴포넌트입니다. 풀 원형(donut)과 반원형 게이지(gauge) 2가지 variant를 지원하며, 중앙에 라벨을 표시할 수 있습니다.

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

인터랙티브 데모

풀 도넛, 반원 게이지, 중앙 라벨 등 variant를 전환하세요.

tsx

<DcDonutChart
  data={[
    { name: "주식", value: 40, color: CHART_COLORS.primary },
    { name: "채권", value: 35, color: CHART_COLORS.primaryLight },
    { name: "현금", value: 25, color: CHART_COLORS.orange },
  ]}
  height={280}
/>

Variants

다양한 세그먼트 수와 도넛/게이지 형태를 비교합니다.

3 Segments

4 Segments

5 Segments

Gauge

Center Label

Props

DcDonutChart

Prop	Type	Required	Default	설명
`data`	`DonutSegment[]` interface DonutSegment { name: string; value: number; color?: string; }	✓	—	세그먼트 데이터 배열
`variant`	`"donut" \| "gauge"`	—	"donut"	차트 변형 (donut: 풀 원형, gauge: 반원형 게이지)
`innerRadius`	`number \| string`	—	"60%"	내부 반지름
`outerRadius`	`number \| string`	—	"90%"	외부 반지름
`centerLabel`	`string`	—	—	중앙 라벨 텍스트 (예: 58%)
`centerSubLabel`	`string`	—	—	중앙 라벨 아래 서브 텍스트
`paddingAngle`	`number`	—	3	세그먼트 간 패딩 각도
`height`	`number`	—	200	차트 높이 (px)
`className`	`string`	—	—	추가 CSS 클래스