축과 인터랙션

PeriodSelector

선택된 탭 뒤로 알약 모양 배경이 미끄러져요.
좌우 방향키로 이동할 수 있어요.

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

사용법

tsx

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

const [period, setPeriod] = useState('3M');

<PeriodSelector
  periods={[
    { id: '1W', label: '1주' },
    { id: '1M', label: '1개월' },
    { id: '3M', label: '3개월' },
    { id: '1Y', label: '1년' },
  ]}
  value={period}
  onChange={setPeriod}
  fullWidth
/>

속성

속성	타입	기본값	설명
`periods`	`{ id, label }[]`	`1일~전체`	탭 목록.
`value`	`string`	—	선택된 탭 id.
`onChange`	`(id) => void`	—	탭을 바꿀 때.
`activeColor`	`string`	`var(--fnv-accent)`	선택 색. 등락 색과 맞추면 자연스러워요.
`fullWidth`	`boolean`	`false`	탭을 가로로 꽉 채워요(모바일).

← YAxis →값 축과 가로 격자 ReferenceLine →평단가, 목표가 같은 기준선