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

A design system for the AI era

  • Docs
  • Pricing
  • Releases
  • GitHub
  • Terms of Service
  • Privacy Policy

© 2026 reopt-ai. All rights reserved.

Explore/opt-charts/PieChart

PieChart

Chart

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

radial
Related docs
bun add @reopt-ai/opt-charts
100%

Basic Pie Chart

Donut Chart

Basic Donut

With Padding

With Labels

Custom Colors

Without Legend

Related components

GaugeChart

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

Radial

ChartContainer

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

Heatmap

ChartTooltip

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

Heatmap

ChartLegend

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

Heatmap

LineChart

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

Cartesian

BarChart

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

Cartesian
PreviousSparklineNextScatterChart
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