표시

Legend

HTML로 그려서 좁은 화면에서도 줄바꿈이 돼요.
onItemClick으로 켜고 끄기, onItemHover로 강조를 연결하세요.
차트의 legend 속성으로 간단히 켤 수도 있어요.

사용법

tsx

import { Legend } from '@funnest/charts-react';

<Legend
  shape="line"
  items={lines.map((l) => ({ id: l.id, label: l.label, color: l.color, inactive: hidden.includes(l.id) }))}
  onItemClick={toggle}
  onItemHover={setHovered}
/>

속성

속성	타입	기본값	설명
`items`	`{ id, label, color, value?, inactive? }[]`	—	범례 항목.
`shape`	`'circle' \| 'square' \| 'line'`	`'circle'`	색 표시 모양.
`onItemClick`	`(id) => void`	—	누르면(버튼으로 바뀌어요).
`onItemHover`	`(id \| null) => void`	—	올리면 id, 벗어나면 null.

← Point →매수·매도 표시와 실시간 점