PieChart

Chart

비율/구성 데이터용 파이 차트. innerRadius를 설정하면 도넛 차트가 됩니다.

radial

Related docs

bun add @reopt-ai/opt-charts

100%

Basic Pie Chart

Donut Chart

Basic Donut

With Padding

With Labels

Custom Colors

Without Legend

PieChart

Prop	Type	Default	Description
data*	PieChartDataPoint[]	—	차트 데이터 배열 ({ name, value, color? })
height	number \| `${number}%`	300	차트 높이
className	string	—	루트 요소에 붙는 CSS 클래스
innerRadius	number \| string	0	내부 반경 (도넛 차트용, 예: '60%')
outerRadius	number \| string	"80%"	외부 반경
paddingAngle	number	0	섹션 간 간격 (도)
startAngle	number	90	시작 각도 (도)
endAngle	number	-270	끝 각도 (도)
tooltipOptions	ChartTooltipContentProps	—	ChartTooltipContent에 그대로 넘길 옵션
legendOptions	ChartLegendContentProps	—	ChartLegendContent에 그대로 넘길 옵션. 항목별 토글(inactiveKeys)은 지원하지 않습니다 — Recharts가 파이/방사형 범례를 차트 데이터에서 직접 만들어 항목마다 고유한 dataKey가 없습니다
labelFormatter	(entry: PieChartDataPoint) => string	—	조각 레이블 문자열을 만드는 함수
aria-label	string	—	스크린 리더용 레이블
aria-describedby	string	—	차트를 설명하는 요소의 id
showLabels	boolean	false	라벨 표시 여부
animate	boolean	true	진입 애니메이션 사용 여부
showTooltip	boolean	true	툴팁 표시 여부
showLegend	boolean	true	범례 표시 여부

컴포넌트 의존 관계

깊이

View test results

테스트 커버리지

2026년 7월 9일

생성된 테스트 결과를 찾지 못했습니다.

PieChart 항목이 문서 메타에 연결되어 있지만 현재 생성 파일에는 없습니다.

테스트를 추가한 뒤 `bun run generate:test-results`를 실행하거나 `testDescribe` 매핑을 다시 확인하세요.

Blocks that use this component

BreakdownAnalysis

Analytics

Related components

GaugeChart

Radial

RadarChart

Radial

RadialBarChart

Radial

Sunburst

Radial

ChartContainer

Heatmap

ChartTooltip

Heatmap

PieChart

Chart

비율/구성 데이터용 파이 차트. innerRadius를 설정하면 도넛 차트가 됩니다.

radial

Related docs

bun add @reopt-ai/opt-charts

100%

Basic Pie Chart

Donut Chart

Basic Donut

With Padding

With Labels

Custom Colors

Without Legend

PieChart

Prop	Type	Default	Description
data*	PieChartDataPoint[]	—	차트 데이터 배열 ({ name, value, color? })
height	number \| `${number}%`	300	차트 높이
className	string	—	루트 요소에 붙는 CSS 클래스
innerRadius	number \| string	0	내부 반경 (도넛 차트용, 예: '60%')
outerRadius	number \| string	"80%"	외부 반경
paddingAngle	number	0	섹션 간 간격 (도)
startAngle	number	90	시작 각도 (도)
endAngle	number	-270	끝 각도 (도)
tooltipOptions	ChartTooltipContentProps	—	ChartTooltipContent에 그대로 넘길 옵션
legendOptions	ChartLegendContentProps	—	ChartLegendContent에 그대로 넘길 옵션. 항목별 토글(inactiveKeys)은 지원하지 않습니다 — Recharts가 파이/방사형 범례를 차트 데이터에서 직접 만들어 항목마다 고유한 dataKey가 없습니다
labelFormatter	(entry: PieChartDataPoint) => string	—	조각 레이블 문자열을 만드는 함수
aria-label	string	—	스크린 리더용 레이블
aria-describedby	string	—	차트를 설명하는 요소의 id
showLabels	boolean	false	라벨 표시 여부
animate	boolean	true	진입 애니메이션 사용 여부
showTooltip	boolean	true	툴팁 표시 여부
showLegend	boolean	true	범례 표시 여부

컴포넌트 의존 관계

깊이

View test results

테스트 커버리지

2026년 7월 9일

생성된 테스트 결과를 찾지 못했습니다.

PieChart 항목이 문서 메타에 연결되어 있지만 현재 생성 파일에는 없습니다.

테스트를 추가한 뒤 `bun run generate:test-results`를 실행하거나 `testDescribe` 매핑을 다시 확인하세요.

Blocks that use this component

BreakdownAnalysis

Analytics

Related components

GaugeChart

Radial

RadarChart

Radial

RadialBarChart

Radial

Sunburst

Radial

ChartContainer

Heatmap

ChartTooltip

Heatmap