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

ChartTooltip

Chart

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

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

Live preview

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

100%

Default Tooltip

마우스를 차트 위로 올려 툴팁을 확인하세요. opt-charts 컴포넌트는 기본적으로 role=tooltip인 툴팁을 사용하고 색상 점은 장식 요소로 접근성 트리에서 제외합니다.

Custom Value Formatter

ChartTooltipContent Component

Standalone Preview

March

Sales5,000
Profit2,800

With Value Formatter

March

Revenue$5,000
Expenses$2,200

ChartTooltipContent

PropTypeDefaultDescription
activeboolean—툴팁 활성화 상태 (Recharts 자동 전달)
payloadReadonlyArray<ChartTooltipPayloadItem>—데이터 포인트 배열 (Recharts 자동 전달)
labelReactNode—X축 레이블
labelFormatter(label: ReactNode) => ReactNode—레이블 포맷터 함수
valueFormatter(value: TooltipValueType, name: ChartTooltipName) => ReactNode—값 포맷터 함수
formatterChartTooltipFormatter—Recharts가 넘기는 항목 단위 포맷터. [값, 이름] 쌍을 돌려주면 이름까지 바꾸고, null이면 그 행을 지웁니다. tooltipType="none" 항목은 애초에 렌더링되지 않습니다
markerChartTooltipMarker"line"행 앞의 키 모양 — 선 차트는 line, 막대·영역은 square, 점은 dot
localestring—기본 숫자 포맷의 로케일
classNamestring—루트 요소에 붙는 CSS 클래스
hideLabelbooleanfalse레이블 숨김 여부
View test results

테스트 커버리지

2026년 7월 9일

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

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

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

Related components

opt-charts

ChartContainer

Charts

Wrap Recharts ResponsiveContainer with accessible attributes and consistent chart styling.

opt-charts

ChartLegend

Charts

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

opt-charts

CalendarHeatmap

Charts

Show daily activity across a year in a GitHub-style calendar heatmap.

opt-charts

Treemap

Charts

Show hierarchical proportions as area-scaled rectangles with category colors, tooltips, titles, and keyboard focus.

opt-charts

Heatmap

Charts

Visualize row-by-column intensity while retaining table headings and values for screen readers.

opt-charts

RetentionHeatmap

Charts

Compare cohort retention using color intensity in a heatmap.

PreviousChartContainerNextChartLegend