reopt design
DocsExploreTemplatesCanvasToolsPricing
Login
opt-uiopt-chartsopt-datagridopt-editoropt-calendaropt-filemanageropt-chatopt-shellbrandapp-ui
opt-charts40
ReportWidget
reopt designreopt design

A design system for the AI era

  • Docs
  • Pricing
  • Releases
  • About
  • Contact
  • Terms of Service
  • Privacy Policy

reopt Inc.Business registration no. 217-88-02453contact@reopt.ai

© 2026 reopt Inc. All rights reserved.

ReportWidget

Chart

Render report data as line, bar, area, pie, scatter, gauge, funnel, sparkline, or metric widgets.

analytics
Related docs
bun add @reopt-ai/opt-charts
Install and import
bash
bun add @reopt-ai/opt-charts
tsx
import { ReportWidget } from "@reopt-ai/opt-charts";

Live preview

Change the width and theme, then interact with the components.

100%

Total Users

12,847↑up +8.2%

Bounce Rate

34%↓down -2.1%

ReportWidget

PropTypeDefaultDescription
configRequiredReportWidgetConfig—type·title·data·series 등. scatter는 series[].dataKey가 Y, xKey(기본 x)가 X
heightnumber200타일 높이(px)
loadingbooleanfalse새 결과를 기다리는 동안 차트를 흐리게 유지
localestring—차트 기본 포맷터 로캘
labelsReportWidgetLabels—로딩·빈 상태 문구와 방향 낱말. 지역화 지점
classNamestring—루트 CSS 클래스

컴포넌트 의존 관계

깊이
▲ USED BY (1)custom-dashboardReportWidget
View test results

테스트 커버리지

2026년 7월 9일2/2 통과
2성공
0실패
2전체
  • metric 타입을 렌더링한다
  • title과 description을 렌더링한다

Blocks that use this component

opt-ui

CustomDashboard

Blocks

Arrange custom dashboard widgets with WidgetGrid, ReportBuilder, ReportWidget, and FilterBar.

Related components

opt-charts

RetentionHeatmap

Charts

Compare cohort retention using color intensity in a heatmap.

opt-charts

MetricsCard

Charts

Pair a key metric with a Sparkline to show its value and trend together.

opt-charts

TrendChart

Charts

Combine a Card and AreaChart with the title and description linked to the chart's accessible name.

opt-charts

ChartContainer

Charts

Wrap Recharts ResponsiveContainer with accessible attributes and consistent chart styling.

opt-charts

ChartTooltip

Charts

Style Recharts tooltips with tooltip semantics and hidden decorative markers through the content prop.

opt-charts

ChartLegend

Charts

Display chart legends as lists, with real buttons for interactive series toggles.

PreviousEventSparkline