reopt design
DocsExploreTemplatesCanvasToolsPricing
Login
opt-uiopt-chartsopt-datagridopt-editoropt-calendaropt-filemanageropt-chatopt-shellbrandapp-ui
opt-charts40
EventSparkline
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.

EventSparkline

Chart

Show an event label, value, change, and miniature trend chart together.

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

Live preview

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

100%

Page Views

2,847↑up +12.5%

Bounce Rate

34%↓down -8.2%

EventSparkline

PropTypeDefaultDescription
dataRequirednumber[]—스파크라인 값
labelstring—이벤트 이름
valuestring—현재 값
changestring—변화량 텍스트
trendTrendDirection"neutral"변화 방향. 상태색 + 화살표 + 숨김 텍스트
invertTrendbooleanfalse내려가는 게 좋은 지표. 배지 색의 판정만 뒤집는다
colorstring—스파크라인 색
classNamestring—루트 CSS 클래스
labelsEventSparklineLabels—기본 라벨·접근성 이름·방향 낱말. 지역화 지점

컴포넌트 의존 관계

깊이
▼ USES (1)EventSparklinesparkline
View test results

테스트 커버리지

2026년 7월 9일2/2 통과
2성공
0실패
2전체
  • 라벨과 값을 렌더링한다
  • 변화량과 트렌드를 표시한다

Related components

opt-charts

Sparkline

Charts

Show compact inline trends in stat cards, table cells, and other small spaces.

opt-charts

PathFlowChart

Charts

Explore staged user paths with transition ribbons, session starts and exits, grid or proportional Sankey layouts, and linked hover highlighting.

opt-charts

TimeSeriesChart

Charts

Explore time series with fixed query ranges, automatic ticks, incomplete buckets, drag zoom, annotations, thresholds, and comparison overlays.

opt-charts

TimeSeriesTooltip

Charts

Read full timestamps and time zones, sorted values, totals, comparison deltas, and incomplete-bucket warnings.

opt-charts

SmallMultiples

Charts

Compare breakdowns in small time-series panels with a shared y-axis, synchronized crosshairs, top-value ordering, and a collapsed long tail.

opt-charts

TraceWaterfall

Charts

Inspect nested trace spans on one timeline with collapsible branches, explicit failure markers, and compressed idle gaps that preserve reported durations.

PreviousTrendChartNextReportWidget