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

CalendarHeatmap

Chart

GitHub 스타일 달력 히트맵. 1년 단위 일별 활동량을 색상 강도로 시각화합니다.

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

Activity Heatmap

MonWedFriMayJunJulAugSepOctNovDecJanFebMarAprMay2025-05-25: 02025-05-26: 72025-05-27: 42025-05-28: 12025-05-29: 82025-05-30: 52025-05-31: 22025-06-01: 92025-06-02: 62025-06-03: 32025-06-04: 02025-06-05: 82025-06-06: 52025-06-07: 22025-06-08: 92025-06-09: 62025-06-10: 32025-06-11: 02025-06-12: 72025-06-13: 42025-06-14: 12025-06-15: 82025-06-16: 62025-06-17: 32025-06-18: 02025-06-19: 72025-06-20: 42025-06-21: 12025-06-22: 82025-06-23: 52025-06-24: 22025-06-25: 92025-06-26: 62025-06-27: 42025-06-28: 12025-06-29: 82025-06-30: 52025-07-01: 22025-07-02: 92025-07-03: 62025-07-04: 32025-07-05: 02025-07-06: 72025-07-07: 42025-07-08: 22025-07-09: 92025-07-10: 62025-07-11: 32025-07-12: 02025-07-13: 72025-07-14: 42025-07-15: 12025-07-16: 82025-07-17: 52025-07-18: 22025-07-19: 02025-07-20: 72025-07-21: 42025-07-22: 12025-07-23: 82025-07-24: 52025-07-25: 22025-07-26: 92025-07-27: 62025-07-28: 32025-07-29: 02025-07-30: 82025-07-31: 52025-08-01: 22025-08-02: 92025-08-03: 62025-08-04: 32025-08-05: 02025-08-06: 72025-08-07: 42025-08-08: 12025-08-09: 82025-08-10: 62025-08-11: 32025-08-12: 02025-08-13: 72025-08-14: 42025-08-15: 12025-08-16: 82025-08-17: 52025-08-18: 22025-08-19: 92025-08-20: 62025-08-21: 42025-08-22: 12025-08-23: 82025-08-24: 52025-08-25: 22025-08-26: 92025-08-27: 62025-08-28: 32025-08-29: 02025-08-30: 72025-08-31: 42025-09-01: 22025-09-02: 92025-09-03: 62025-09-04: 32025-09-05: 02025-09-06: 72025-09-07: 42025-09-08: 12025-09-09: 82025-09-10: 52025-09-11: 22025-09-12: 02025-09-13: 72025-09-14: 42025-09-15: 12025-09-16: 82025-09-17: 52025-09-18: 22025-09-19: 92025-09-20: 62025-09-21: 32025-09-22: 02025-09-23: 82025-09-24: 52025-09-25: 22025-09-26: 92025-09-27: 62025-09-28: 32025-09-29: 02025-09-30: 72025-10-01: 42025-10-02: 12025-10-03: 82025-10-04: 62025-10-05: 32025-10-06: 02025-10-07: 72025-10-08: 42025-10-09: 12025-10-10: 82025-10-11: 52025-10-12: 22025-10-13: 92025-10-14: 62025-10-15: 42025-10-16: 12025-10-17: 82025-10-18: 52025-10-19: 22025-10-20: 92025-10-21: 62025-10-22: 32025-10-23: 02025-10-24: 72025-10-25: 42025-10-26: 22025-10-27: 92025-10-28: 62025-10-29: 32025-10-30: 02025-10-31: 72025-11-01: 42025-11-02: 12025-11-03: 82025-11-04: 52025-11-05: 22025-11-06: 02025-11-07: 72025-11-08: 42025-11-09: 12025-11-10: 82025-11-11: 52025-11-12: 22025-11-13: 92025-11-14: 62025-11-15: 32025-11-16: 02025-11-17: 82025-11-18: 52025-11-19: 22025-11-20: 92025-11-21: 62025-11-22: 32025-11-23: 02025-11-24: 72025-11-25: 42025-11-26: 12025-11-27: 82025-11-28: 62025-11-29: 32025-11-30: 02025-12-01: 72025-12-02: 42025-12-03: 12025-12-04: 82025-12-05: 52025-12-06: 22025-12-07: 92025-12-08: 62025-12-09: 42025-12-10: 12025-12-11: 82025-12-12: 52025-12-13: 22025-12-14: 92025-12-15: 62025-12-16: 32025-12-17: 02025-12-18: 72025-12-19: 42025-12-20: 22025-12-21: 92025-12-22: 62025-12-23: 32025-12-24: 02025-12-25: 72025-12-26: 42025-12-27: 12025-12-28: 82025-12-29: 52025-12-30: 22025-12-31: 02026-01-01: 72026-01-02: 42026-01-03: 12026-01-04: 82026-01-05: 52026-01-06: 22026-01-07: 92026-01-08: 62026-01-09: 32026-01-10: 02026-01-11: 82026-01-12: 52026-01-13: 22026-01-14: 92026-01-15: 62026-01-16: 32026-01-17: 02026-01-18: 72026-01-19: 42026-01-20: 12026-01-21: 82026-01-22: 62026-01-23: 32026-01-24: 02026-01-25: 72026-01-26: 42026-01-27: 12026-01-28: 82026-01-29: 52026-01-30: 22026-01-31: 92026-02-01: 62026-02-02: 42026-02-03: 12026-02-04: 82026-02-05: 52026-02-06: 22026-02-07: 92026-02-08: 62026-02-09: 32026-02-10: 02026-02-11: 72026-02-12: 42026-02-13: 22026-02-14: 92026-02-15: 62026-02-16: 32026-02-17: 02026-02-18: 72026-02-19: 42026-02-20: 12026-02-21: 82026-02-22: 52026-02-23: 22026-02-24: 02026-02-25: 72026-02-26: 42026-02-27: 12026-02-28: 82026-03-01: 52026-03-02: 22026-03-03: 92026-03-04: 62026-03-05: 32026-03-06: 02026-03-07: 82026-03-08: 52026-03-09: 22026-03-10: 92026-03-11: 62026-03-12: 32026-03-13: 02026-03-14: 72026-03-15: 42026-03-16: 12026-03-17: 82026-03-18: 62026-03-19: 32026-03-20: 02026-03-21: 72026-03-22: 42026-03-23: 12026-03-24: 82026-03-25: 52026-03-26: 22026-03-27: 92026-03-28: 62026-03-29: 42026-03-30: 12026-03-31: 82026-04-01: 52026-04-02: 22026-04-03: 92026-04-04: 62026-04-05: 32026-04-06: 02026-04-07: 72026-04-08: 42026-04-09: 22026-04-10: 92026-04-11: 62026-04-12: 32026-04-13: 02026-04-14: 72026-04-15: 42026-04-16: 12026-04-17: 82026-04-18: 52026-04-19: 22026-04-20: 02026-04-21: 72026-04-22: 42026-04-23: 12026-04-24: 82026-04-25: 52026-04-26: 22026-04-27: 92026-04-28: 62026-04-29: 32026-04-30: 02026-05-01: 82026-05-02: 52026-05-03: 22026-05-04: 92026-05-05: 62026-05-06: 32026-05-07: 02026-05-08: 72026-05-09: 42026-05-10: 12026-05-11: 82026-05-12: 62026-05-13: 32026-05-14: 02026-05-15: 72026-05-16: 42026-05-17: 12026-05-18: 82026-05-19: 52026-05-20: 22026-05-21: 92026-05-22: 62026-05-23: 42026-05-24: 1

Related components

ChartContainer

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

Heatmap

ChartTooltip

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

Heatmap

ChartLegend

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

Heatmap

RetentionHeatmap

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

AnalyticsHeatmap

LineChart

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

Cartesian

BarChart

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

Cartesian
PreviousSankeyChartNextWaterfallChart

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

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 Line Chart

Multiple Series

Customization

With Dots

Without Grid

Basic Bar Chart

Stacked & Grouped

Stacked

Grouped

Vertical Layout