ChartLegend

visual

opt-ui 스타일의 list/listitem 차트 범례. 인터랙티브 항목은 실제 button으로 시리즈를 토글합니다.

100%

showLegend prop을 true로 설정하면 reopt 스타일 범례가 표시됩니다. 범례는 list/listitem 구조이며 클릭 가능한 항목은 button으로 렌더링됩니다. 목록 자체의 접근 가능한 이름은 labels로 번역할 수 있습니다.

Sales

Profit

Expenses

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

Sales

Profit

Expenses

2026년 7월 9일

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

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

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

Prop	타입	기본값	설명
`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"(레이블)를 씁니다

tsx

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

visual

opt-ui 스타일의 list/listitem 차트 범례. 인터랙티브 항목은 실제 button으로 시리즈를 토글합니다.

100%

Sales

Profit

Expenses

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

Sales

Profit

Expenses

2026년 7월 9일

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

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

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

Prop	타입	기본값	설명
`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"(레이블)를 씁니다

tsx

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