ChartLegend
visualDisplay chart legends as lists, with real buttons for interactive series toggles.
100%
매출·이익·비용 비교
범례를 눌러 비교할 항목을 선택하세요. Tab으로 이동한 뒤 Enter 또는 Space로 표시하거나 숨길 수 있습니다.
표시 중: 매출 · 이익 · 비용
ChartLegendContent Component
Standalone Preview
Sales
Profit
Expenses
With Inactive Items
inactiveKeys prop으로 비활성 시리즈를 표시할 수 있습니다.
Sales
Profit
Expenses
테스트 커버리지
2026년 7월 9일생성된 테스트 결과를 찾지 못했습니다.
ChartLegendContent 항목이 문서 메타에 연결되어 있지만 현재 생성 파일에는 없습니다.
테스트를 추가한 뒤 `bun run generate:test-results`를 실행하거나 `testDescribe` 매핑을 다시 확인하세요.
ChartLegendContent Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
marker | "dot" | "line" | "square" | "dot" | 계열 기호 형태 |
orientation | "horizontal" | "vertical" | "horizontal" | 범례 배치 방향 |
valueFormatter | (entry: ChartLegendItem) => React.ReactNode | — | 계열 이름과 분리해 표시할 요약 수치 |
payload | ChartLegendItem[] | — | 범례 항목 배열 (Recharts 자동 전달) |
className | string | — | 루트 요소에 붙는 CSS 클래스 |
onClick | (dataKey: string) => void | — | 항목 클릭 핸들러 (시리즈 토글용) |
inactiveKeys | string[] | — | 비활성화된 시리즈 키 목록 |
formatter | (value: string) => ReactNode | — | 레이블 포맷터 함수 |
labels | ChartLegendLabels | — | 범례가 직접 쓰는 문자열 (legendAriaLabel). 지역화 지점 |
keyBy | ChartLegendKeyBy | "dataKey" | 범례 항목이 어떤 필드로 시리즈를 식별하는지. 산점/버블처럼 Recharts가 dataKey를 주지 않는 차트는 "value"(레이블)를 씁니다 |
Import
tsx
import { ChartLegendContent, createChartLegend } from "@reopt-ai/opt-ui";