reopt designreopt design
DocsExploreToolsPricingBuilder
Start
Overview
Start
Core Concepts
Core Concepts
데이터 모델
데이터 모델
Build & Operate
Production readiness
opt-charts · Charts
ChartContainer
ChartTooltip
ChartLegend
LineChart
BarChart
AreaChart
Sparkline
PieChart
ScatterChart
ComparisonChart
GaugeChart
FunnelChart
RetentionHeatmap
SankeyChart
CalendarHeatmap
WaterfallChart
BubbleChart
MetricsCard
TrendChart
EventSparkline
ReportWidget
Oopt-charts
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.

ChartLegend

visual

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

100%

Default Legend

showLegend prop을 true로 설정하면 reopt 스타일 범례가 표시됩니다.

ChartLegendContent Component

Standalone Preview

With Inactive Items

inactiveKeys prop으로 비활성 시리즈를 표시할 수 있습니다.

테스트 커버리지

2026년 2월 4일

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

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

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

ChartLegendContent Props

Prop타입기본값설명
payloadChartLegendItem[]—범례 항목 배열 (Recharts 자동 전달)
onClick(dataKey: string) => void—항목 클릭 핸들러 (시리즈 토글용)
inactiveKeysstring[]—비활성화된 시리즈 키 목록
formatter(value: string) => ReactNode—레이블 포맷터 함수

Import

tsx
import { ChartLegendContent, createChartLegend } from "@reopt-ai/opt-ui";