reopt designreopt design
DocsExploreToolsPricingBuilder
Explore/
opt-ui161opt-charts21opt-datagrid5opt-editor5opt-chat6opt-shell14brandapp-ui8Examples12
reopt designreopt design

AI 시대를 위한 디자인 시스템

  • 문서
  • 가격
  • 릴리즈 노트
  • GitHub
  • 서비스 약관
  • 개인정보처리방침

© 2026 reopt-ai. All rights reserved.

Explore/opt-charts/PieChart

PieChart

차트

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

radial
관련 문서
bun add @reopt-ai/opt-charts
100%

Basic Pie Chart

Donut Chart

Basic Donut

With Padding

With Labels

Custom Colors

Without Legend

관련 컴포넌트

GaugeChart

게이지/미터 차트. SVG 기반으로 진행률이나 KPI를 시각화합니다.

방사형

ChartContainer

Recharts ResponsiveContainer를 감싸는 반응형 차트 컨테이너. 접근성 속성과 스타일링을 지원합니다.

히트맵

ChartTooltip

opt-ui 스타일의 차트 툴팁. Recharts Tooltip의 content prop으로 사용됩니다.

히트맵

ChartLegend

opt-ui 스타일의 차트 범례. 클릭하여 시리즈를 토글할 수 있습니다.

히트맵

LineChart

연속 데이터용 선 차트. 시간에 따른 추세나 변화를 시각화합니다.

직교 좌표

BarChart

비교 데이터용 막대 차트. 카테고리 간 값 비교를 시각화합니다.

직교 좌표
이전Sparkline다음ScatterChart
72Performance
45Conversion
92%Uptime

Basic Usage

ChartContainer는 Recharts ResponsiveContainer를 감싸고 접근성 속성을 지원합니다. 일반적으로 LineChart, BarChart, AreaChart 컴포넌트가 내부적으로 사용하므로 직접 사용할 필요는 없습니다.

Different Heights

height=150

height=300

Default Tooltip

마우스를 차트 위로 올려 툴팁을 확인하세요. opt-charts 컴포넌트는 기본적으로 reopt 스타일 툴팁을 사용합니다.

Custom Value Formatter

ChartTooltipContent Component

Standalone Preview

March

Sales:5000
Profit:2800

With Value Formatter

March

Revenue:$5,000
Expenses:$2,200

Default Legend

showLegend prop을 true로 설정하면 reopt 스타일 범례가 표시됩니다.

ChartLegendContent Component

Standalone Preview

With Inactive Items

inactiveKeys prop으로 비활성 시리즈를 표시할 수 있습니다.

Basic Line Chart

Multiple Series

Customization

With Dots

Without Grid

Basic Bar Chart

Stacked & Grouped

Stacked

Grouped

Vertical Layout