ChartLegend
visualopt-ui 스타일의 list/listitem 차트 범례. 인터랙티브 항목은 실제 button으로 시리즈를 토글합니다.
100%
Default Legend
showLegend prop을 true로 설정하면 reopt 스타일 범례가 표시됩니다. 범례는 list/listitem 구조이며 클릭 가능한 항목은 button으로 렌더링됩니다.
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 | 타입 | 기본값 | 설명 |
|---|---|---|---|
payload | ChartLegendItem[] | — | 범례 항목 배열 (Recharts 자동 전달) |
onClick | (dataKey: string) => void | — | 항목 클릭 핸들러 (시리즈 토글용) |
inactiveKeys | string[] | — | 비활성화된 시리즈 키 목록 |
formatter | (value: string) => ReactNode | — | 레이블 포맷터 함수 |
Import
tsx
import { ChartLegendContent, createChartLegend } from "@reopt-ai/opt-ui";