PieChart

visual

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

깊이

100%

2026년 7월 9일

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

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

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

Prop	타입	기본값	설명
`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`	범례 표시 여부

tsx

import { PieChart } from "@reopt-ai/opt-ui";