PieChart
visualVisualize proportions with a pie or donut chart using innerRadius. Consider a single metric for a two-part split.
컴포넌트 의존 관계
깊이
100%
Basic Pie Chart
Donut Chart
Basic Donut
With Padding
With Labels
Custom Colors
Without Legend
테스트 커버리지
2026년 7월 9일생성된 테스트 결과를 찾지 못했습니다.
PieChart 항목이 문서 메타에 연결되어 있지만 현재 생성 파일에는 없습니다.
테스트를 추가한 뒤 `bun run generate:test-results`를 실행하거나 `testDescribe` 매핑을 다시 확인하세요.
PieChart Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
data* | PieChartDataPoint[] | — | 차트 데이터 배열 ({ name, value, color? }) |
height | number | `${number}%` | 300 | 차트 높이 |
className | string | — | 루트 요소에 붙는 CSS 클래스 |
showTooltip | boolean | true | 툴팁 표시 여부 |
showLegend | boolean | — | 범례 표시 여부. 생략하면 조각이 둘 이상일 때만 보인다 |
showLabels | boolean | "all" | false | 조각 레이블 표시. true는 5% 이상 조각만, "all"은 모든 조각 |
animate | boolean | true | false면 애니메이션을 끈다. 그 외에는 prefers-reduced-motion을 따른다 |
innerRadius | number | string | 0 | 내부 반경 (도넛 차트용, 예: '60%') |
outerRadius | number | string | "80%" | 외부 반경 |
paddingAngle | number | 0 | 섹션 간 간격 (도). 2px 표면색 간격은 항상 들어간다 |
startAngle | number | 90 | 시작 각도 (도) |
endAngle | number | -270 | 끝 각도 (도) |
locale | string | — | 기본 숫자 포맷의 로케일. 생략하면 런타임 로케일 |
loading | boolean | false | 새 데이터를 기다리는 동안 현재 렌더를 흐리게 유지 |
accessibleTable | boolean | false | 스크린 리더용 숨김 데이터 표를 함께 렌더 |
emptyState | ReactNode | — | 데이터가 없을 때 보일 내용. 생략하면 labels.empty |
labels | PieChartLabels | — | 사용자 노출 문자열 (empty, summaryCaption, nameColumn, valueColumn, shareColumn, chartName). 기본은 영어 |
tooltipOptions | ChartTooltipContentProps | — | ChartTooltipContent에 그대로 넘길 옵션 |
legendOptions | ChartLegendOptions | — | ChartLegendContent에 그대로 넘길 옵션. 조각은 모두 한 value 키로 그려지므로 inactiveKeys는 조각 name으로 지정한다. 꺼진 조각은 값 0으로 사라지고 범례 항목은 남는다 |
legendToggle | boolean | true | 범례 칩 클릭으로 시리즈를 켜고 끕니다. legendOptions.inactiveKeys를 주면 호출자가 상태를 소유하고, onClick만 주면 클릭을 전달받으면서 차트가 상태를 유지합니다. 마지막 남은 시리즈는 꺼지지 않습니다. false면 정적 범례 |
labelFormatter | (entry: PieChartDataPoint, percent: number) => string | — | 조각 레이블 문자열을 만드는 함수. 기본은 "Name 42%" |
aria-label | string | — | 스크린 리더용 레이블. 생략하면 차트 종류와 시리즈 이름으로 만든다 |
aria-describedby | string | — | 차트를 설명하는 요소의 id |
Import
tsx
import { PieChart } from "@reopt-ai/opt-ui";