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/ReportWidget

ReportWidget

Chart

리포트 위젯. 9가지 차트 타입(line, bar, area, pie, scatter, gauge, funnel, sparkline, metric)을 렌더링합니다.

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

Total Users

12,847↑+8.2%

Bounce Rate

34%↓-2.1%

Related components

RetentionHeatmap

리텐션 히트맵. 코호트별 사용자 유지율을 색상 강도로 시각화합니다.

AnalyticsHeatmap

MetricsCard

통계 카드 + Sparkline 조합. 주요 지표와 추세를 함께 표시합니다.

Analytics

TrendChart

Card + AreaChart 조합. 제목과 설명이 있는 카드 내에 추세 차트를 표시합니다.

Analytics

ChartContainer

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

Heatmap

ChartTooltip

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

Heatmap

ChartLegend

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

Heatmap
PreviousEventSparkline
CohortDay 0Day 1Day 3Day 7Day 14Day 30
Week 1100%80%65%50%42%38%
Week 2100%75%58%45%38%—
Week 3100%82%70%55%——
Week 4100%78%62%———
Week 5100%85%————

Basic Usage

Total Revenue$45,231↑ +12.5%
Expenses$12,345↓ -8.2%
Active Users1,234 +0.5%

Without Sparkline

Total Orders1,234↑ +23 today
Pending Tasks12↓ -3 from yesterday
Team Members8

Trend Variants

All Trends

Up Trend$10,000↑ +15%
Down Trend$5,000↓ -10%
Neutral$7,500 +0.1%

Basic Usage

Revenue Trend

Monthly revenue and profit

Single Series

Weekly Visitors

Number of unique visitors per day

With Header Actions

Sales Overview

Last 6 months

Custom Height

height=200

Compact Chart

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으로 비활성 시리즈를 표시할 수 있습니다.