DonutChart
recharts 기반 도넛 차트 컴포넌트. PieChart에 innerRadius를 적용하여 중앙에 빈 공간을 제공합니다.
인터랙티브 예시
기본 차트
빈 상태
데이터가 없습니다
API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
series | DonutChartSeries[] | - | 시리즈 데이터 배열 (첫 번째 시리즈만 사용) |
palettes | string[] | 기본 8색 팔레트 | 시리즈별 색상 배열 |
tooltip | boolean | true | 툴팁 표시 여부 |
legend | boolean | true | 범례 표시 여부 |
showDataLabel | boolean | false | 데이터 라벨 표시 |
innerRadius | string | number | "50%" | 도넛 내부 반지름 (% 문자열 또는 px 숫자) |
height | number | 350 | 차트 높이 (px) |
emptyText | string | "데이터가 없습니다" | 데이터 없을 때 표시 텍스트 |
onPointClick | (data: DonutChartPointClickData) => void | - | 포인트 클릭 시 콜백 |
visible | boolean | true | 표시 여부 (false면 렌더링 안 함) |
className | string | - | 컨테이너에 적용할 CSS 클래스 |
style | CSSProperties | - | 인라인 스타일 |
children | ReactNode | - | 차트 내부 커스텀 콘텐츠 (recharts 직접 사용) |
DonutChartSeries
| Field | Type | Required | Description |
|---|---|---|---|
dataSource | Record<string, unknown>[] | ✅ | 시리즈 데이터 배열 |
xName | string | ✅ | 이름(카테고리) 데이터 키 |
yName | string | ✅ | 값 데이터 키 |
name | string | - | 시리즈 이름 (범례 표시) |
width | number | - | 너비 |
DonutChartPointClickData
| Field | Type | Description |
|---|---|---|
seriesName | string | 클릭된 시리즈 이름 |
seriesIndex | number | 클릭된 시리즈 인덱스 |
xValue | unknown | 클릭된 포인트의 X값 |
yValue | unknown | 클릭된 포인트의 Y값 |
payload | Record<string, unknown> | 클릭된 포인트의 전체 데이터 |
접근성
권장 사항
- ✅ recharts
accessibilityLayer자동 활성화 - ✅ 빈 차트 시 대체 텍스트(emptyText) 제공
- ✅ 범례(legend)로 시리즈 구분 제공
관련 컴포넌트
- PieChart: 원형 차트
Last updated on