축과 인터랙션

Scrubber

포인터 위치의 세로선, 계열마다 점, 값 말풍선을 그려요.
onScrubberPositionChange로 짚은 위치를 받아 큰 가격 헤더를 바꾸는 토스식 화면을 만들 수 있어요.

110,604원+11,704원 (+11.83%)

사용법

tsx

const [index, setIndex] = useState<number | null>(null);
const shown = prices[index ?? prices.length - 1];

<strong>{shown.toLocaleString()}원</strong>
<LineChart
  series={[{ id: 'price', data: prices }]}
  scrubber
  onScrubberPositionChange={setIndex}
/>

속성

속성	타입	기본값	설명
`label`	`(index) => string`	—	세로선 위 글자. 기본은 x 라벨. 빈 문자열이면 숨겨요.
`showValues`	`boolean`	`false`	계열 값 말풍선.
`valueFormatter`	`(value, seriesId) => string`	—	말풍선 값 형식.
`seriesIds`	`string[]`	—	표시할 계열만 고르기.
`dimFuture`	`boolean`	`true`	짚은 곳 오른쪽을 흐리게.

← Sparkline →관심종목 목록의 작은 차트 XAxis →시간·카테고리 축