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

TimeSeriesTooltip

Chart

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

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

Live preview

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

100%

Sorted, with a full timestamp

Hover the chart. Series are ranked by value, so the eye does not have to chase the legend order.

Total and time zone

Comparison folded into a delta

Rendered on its own

Static preview

Aug 24, 2026

Still filling

Web430
Mobile320
API180
Total930

TimeSeriesTooltipContent

PropTypeDefaultDescription
activeboolean—Recharts가 넘기는 활성 여부. 툴팁으로 쓸 때 직접 주지 않는다
payloadReadonlyArray<TooltipEntry>—Recharts가 넘기는 해당 지점의 시리즈 값들
labelReact.ReactNode—Recharts가 넘기는 축 레이블
granularityTimeGranularity"day"버킷 단위 (타임스탬프 정밀도 결정)
timeZonestring—타임스탬프를 읽을 IANA 타임존
localestring—축·툴팁의 시각 표기에 쓰는 로케일. 생략하면 브라우저 기본값
showTimeZonebooleanfalse시각 옆에 시간대 이름을 함께 표시할지 여부
sortByValuebooleantrue값 내림차순 정렬
showTotalbooleanfalse표시 중인 시리즈 합계 행
maxItemsnumber12표시할 시리즈 최대 개수
comparisonKeysReadonly<Record<string, string>>—비교 시리즈 dataKey → 대상 dataKey 매핑
nownumber—"지금"으로 볼 시각 (ms). 미완 구간 판정에 쓰인다
valueFormatter(value: number, dataKey: string) => ReactNode—값 포매터
labelsTimeSeriesTooltipLabels—툴팁이 직접 쓰는 문자열 (합계·미완 구간·더 보기). 지역화 지점
classNamestring—루트 요소에 붙는 CSS 클래스
View test results

테스트 커버리지

2026년 7월 9일

생성된 테스트 결과를 찾지 못했습니다.

TimeSeriesTooltipContent 항목이 문서 메타에 연결되어 있지만 현재 생성 파일에는 없습니다.

테스트를 추가한 뒤 `bun run generate:test-results`를 실행하거나 `testDescribe` 매핑을 다시 확인하세요.

Related components

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

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.

opt-charts

VennDiagram

Charts

Compare two or three sets with area-scaled SVG circles, interactive exclusive regions, and an accessible table; three-set placement is approximate.

opt-charts

EventSparkline

Charts

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

PreviousTimeSeriesChartNextLoadingChart