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

ChartLegend

Chart

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

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

Live preview

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

100%

매출·이익·비용 비교

범례를 눌러 비교할 항목을 선택하세요. Tab으로 이동한 뒤 Enter 또는 Space로 표시하거나 숨길 수 있습니다.

표시 중: 매출 · 이익 · 비용

ChartLegendContent Component

Standalone Preview

Sales
Profit
Expenses

With Inactive Items

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

Sales
Profit
Expenses

ChartLegendContent

PropTypeDefaultDescription
marker"dot" | "line" | "square""dot"계열 기호 형태
orientation"horizontal" | "vertical""horizontal"범례 배치 방향
valueFormatter(entry: ChartLegendItem) => React.ReactNode—계열 이름과 분리해 표시할 요약 수치
payloadChartLegendItem[]—범례 항목 배열 (Recharts 자동 전달)
classNamestring—루트 요소에 붙는 CSS 클래스
onClick(dataKey: string) => void—항목 클릭 핸들러 (시리즈 토글용)
inactiveKeysstring[]—비활성화된 시리즈 키 목록
formatter(value: string) => ReactNode—레이블 포맷터 함수
labelsChartLegendLabels—범례가 직접 쓰는 문자열 (legendAriaLabel). 지역화 지점
keyByChartLegendKeyBy"dataKey"범례 항목이 어떤 필드로 시리즈를 식별하는지. 산점/버블처럼 Recharts가 dataKey를 주지 않는 차트는 "value"(레이블)를 씁니다
View test results

테스트 커버리지

2026년 7월 9일

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

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

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

Related components

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

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.

PreviousChartTooltipNextLineChart