7onicDESIGN SYSTEM

PieChart

비율과 구성비를 직관적으로 표현하는 원형 차트 컴포넌트입니다. Pie와 Donut 두 가지 variant가 있으며, 라벨 위치와 중앙 텍스트를 자유롭게 커스터마이즈할 수 있습니다.

2
Variants
3
Label Mode
3
Indicator
Recharts
Base

Playground

Preview
Pie
Variant
Label
Slices
Options
<Chart config={chartConfig} className="w-full mx-auto aspect-square max-h-[300px]">
  <PieChart accessibilityLayer>
    <Chart.Tooltip content={<Chart.TooltipContent hideLabel />} />
    <Chart.Legend content={<Chart.LegendContent nameKey="key" />} />
    <Chart.Pie data={chartData} dataKey="value" nameKey="name" />
  </PieChart>
</Chart>

JSX Composition

Chart.* Chart.*는 이 라이브러리에서, 나머지는 Recharts에서 import하세요.

Legend<Chart.Legend />
Center LabelCSS 오버레이 (donut 전용)

Patterns

PieChart의 주요 표시 패턴입니다. 용도에 맞게 선택하세요.

Default Pie

기본 원형 차트

Donut

도넛형 + 중앙 레이블

925Total

Outside Labels

외부 레이블 + 범례 포함

Styled Donut

패딩 + 둥근 모서리 도넛

Tooltip Styles

Chart.TooltipContent의 indicator prop으로 툴팁 인디케이터 형태를 변경할 수 있습니다.

Dot (default)

기본 점 인디케이터

Chrome275
Safari200
indicator="dot"

Line

수직선 인디케이터

Chrome275
Safari200
indicator="line"

Dashed

파선 인디케이터

Chrome275
Safari200
indicator="dashed"

API

Component Structure

Chart— Recharts
.PieProps.Tooltip.TooltipContentProps.Legend.LegendContent

Props

Chart

config—
ChartConfig

차트 설정 객체(레이블 및 색상 정의)

children—
ReactElement

Recharts 차트 컴포넌트

idundefined
string

차트의 고유 ID(CSS 변수 스코핑용)

Chart.Pie

variant"pie"
"pie" | "donut"

형태. "donut"은 innerRadius를 자동 설정

label"none"
"none" | "outside" | "inside"

레이블 위치. outside=콜아웃 선, inside=슬라이스 내부(작은 슬라이스는 자동 숨김)

labelContent"value"
"value" | "percent"

레이블에 표시할 내용

activeShapetrue
boolean

호버 시 슬라이스를 확대하는 효과

innerRadius0 (pie) / 60 (donut)
number

내부 반지름. variant로 자동 설정되지만 직접 덮어쓰기 가능

paddingAngle0
number

슬라이스 간 간격(도)

cornerRadius0
number

슬라이스 모서리 둥글기

startAngle90
number

시작 각도(90 = 12시 방향)

endAngle-270
number

끝 각도

Chart.TooltipContent

indicator"dot"
"dot" | "line" | "dashed"

인디케이터 형태

hideLabelfalse
boolean

레이블 숨기기

hideIndicatorfalse
boolean

인디케이터 숨기기

colorundefined
string

인디케이터 색상 직접 지정

nameKeyundefined
string

데이터 키의 이름 매핑

labelKeyundefined
string

레이블 키 매핑

labelFormatterundefined
(value, payload) => ReactNode

레이블 커스텀 포매터

formatterundefined
(value, name, item, index, payload) => ReactNode

값 커스텀 포매터

Chart.LegendContent

hideIconfalse
boolean

아이콘 숨기기

nameKeyundefined
string

데이터 키의 이름 매핑

verticalAlign"bottom"
"top" | "middle" | "bottom"

수직 위치

align"center"
"left" | "center" | "right"

수평 위치

layout"horizontal"
"horizontal" | "vertical"

레이아웃 방향

Customization

도넛형의 중앙 레이블은 CSS 오버레이로 구현하므로 HTML 콘텐츠를 자유롭게 커스터마이즈할 수 있습니다.

숫자 + 레이블

925Total
<div className="absolute inset-0 flex flex-col items-center justify-center pointer-events-none"> <span className="text-3xl font-bold">925</span> <span className="text-sm text-text-muted">Total</span> </div>

아이콘 + 퍼센트

+12%Growth
<div className="absolute inset-0 flex flex-col items-center justify-center pointer-events-none"> <TrendingUp className="icon-md text-success" /> <span className="text-lg font-bold">+12%</span> <span className="text-xs text-text-muted">Growth</span> </div>

리치 콘텐츠

Revenue$4.2k+8.5%
<div className="absolute inset-0 flex flex-col items-center justify-center pointer-events-none"> <span className="text-xs text-text-muted">Revenue</span> <span className="text-2xl font-bold">$4.2k</span> <span className="text-xs font-semibold text-success">+8.5%</span> </div>

Tip：중앙 레이블은 CSS 오버레이(absolute + pointer-events-none)로 구현하므로 텍스트, 아이콘, 커스텀 컴포넌트 등 모든 HTML 콘텐츠를 자유롭게 배치할 수 있습니다.

Anatomy

1
2
3
4
30%
7
Total82%
5
Desktop30%
6
Jan
Feb
Mar
Apr
May
1
Root
Chart 래퍼
2
Chart Area
플롯 영역
3
Pie Segment
데이터 슬라이스
4
Label
슬라이스 레이블
5
Tooltip
호버 정보
6
Legend
시리즈 범례
7
Center Area
도넛 중앙

Best Practices

✓

권장

  • ✓슬라이스 수는 5~6개 이내로 유지
  • ✓도넛형으로 중앙에 합계값이나 KPI를 표시
  • ✓Tooltip으로 정확한 수치를 제공
  • ✓Legend로 각 슬라이스를 식별 가능하게
  • ✓accessibilityLayer를 반드시 활성화
✕

지양

  • ✗슬라이스 7개 이상은 사용하지 않기(BarChart가 더 적합)
  • ✗유사한 값이 많은 경우 지양(차이가 보이지 않음)
  • ✗시계열 데이터에는 사용하지 않기(LineChart 권장)
  • ✗색상만으로 구분하지 않기(Legend나 레이블 병용)

Accessibility

키보드 조작

Tab차트 영역에 포커스
Arrow Keys슬라이스 간 이동

ARIA / WCAG

  • Tooltip으로 데이터 값을 텍스트로 제공
  • Legend로 슬라이스를 식별 가능
  • 컬러 토큰으로 다크 모드 자동 대응
  • activeShape으로 호버 피드백 제공
  • accessibilityLayer 키보드 및 SR 지원 활성화