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

EventSparkline

차트

이벤트 스파크라인. 라벨, 값, 변화량과 미니 차트를 표시합니다.

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

Page Views

2,847↑+12.5%

Bounce Rate

34%↓-8.2%

의존 컴포넌트

visualssparkline

관련 컴포넌트

Sparkline

인라인 미니 차트. 작은 공간에서 추세를 빠르게 시각화합니다. StatCard, 테이블 셀 등에서 사용합니다.

직교 좌표

ChartContainer

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

히트맵

ChartTooltip

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

히트맵

ChartLegend

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

히트맵

LineChart

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

직교 좌표

BarChart

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

직교 좌표
이전TrendChart다음ReportWidget

Basic Sparklines

Line
Area
Gradient

Trend Colors

Revenue$45,231
+12.5%
Expenses$12,345
-8.2%
Visitors1,234
+0.5%

Sizes

Various Sizes

Small
Medium
Large

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