PieChart

Chart

Visualize proportions with a pie or donut chart using innerRadius. Consider a single metric for a two-part split.

radial

Related docs

bun add @reopt-ai/opt-charts

Install and import

bash

bun add @reopt-ai/opt-charts

tsx

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

Live preview

Change the width and theme, then interact with the components.

100%

Basic Pie Chart

Donut Chart

Basic Donut

With Padding

With Labels

Custom Colors

Without Legend

Usage examples

Pie chart

PieChart

Prop	Type	Default	Description
dataRequired	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

컴포넌트 의존 관계

깊이

View test results

테스트 커버리지

2026년 7월 9일

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

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

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

Blocks that use this component

BreakdownAnalysis

Blocks

Explore Trend, Distribution, Composition, and Data tabs with multiple charts and a DataTable.

Related components

GaugeChart

Charts

Show one KPI or progress value on a 270-degree SVG dial with minimum and maximum ticks.

RadarChart

Charts

Compare balance across multiple dimensions with polygon radar charts.

RadialBarChart

Charts

Compare progress or proportions across items with concentric rings.

Sunburst

Charts

Represent hierarchical proportions as concentric arcs with accessible names, values, percentages, and top-level legends.

ChartContainer

Charts

Wrap Recharts ResponsiveContainer with accessible attributes and consistent chart styling.

ChartTooltip

Charts

Style Recharts tooltips with tooltip semantics and hidden decorative markers through the content prop.

PieChart

Chart

Visualize proportions with a pie or donut chart using innerRadius. Consider a single metric for a two-part split.

radial

Related docs

bun add @reopt-ai/opt-charts

Install and import

bash

bun add @reopt-ai/opt-charts

tsx

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

Live preview

Change the width and theme, then interact with the components.

100%

Basic Pie Chart

Donut Chart

Basic Donut

With Padding

With Labels

Custom Colors

Without Legend

Usage examples

Pie chart

PieChart

Prop	Type	Default	Description
dataRequired	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

컴포넌트 의존 관계

깊이

View test results

테스트 커버리지

2026년 7월 9일

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

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

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

Blocks that use this component

BreakdownAnalysis

Blocks

Explore Trend, Distribution, Composition, and Data tabs with multiple charts and a DataTable.

Related components

GaugeChart

Charts

Show one KPI or progress value on a 270-degree SVG dial with minimum and maximum ticks.

RadarChart

Charts

Compare balance across multiple dimensions with polygon radar charts.

RadialBarChart

Charts

Compare progress or proportions across items with concentric rings.

Sunburst

Charts

Represent hierarchical proportions as concentric arcs with accessible names, values, percentages, and top-level legends.

ChartContainer

Charts

Wrap Recharts ResponsiveContainer with accessible attributes and consistent chart styling.

ChartTooltip

Charts

Style Recharts tooltips with tooltip semantics and hidden decorative markers through the content prop.