차트

LineChart

가장 많이 쓰는 차트예요.
area로 아래를 채우고, scrubber로 손끝을 따라 값을 읽게 할 수 있어요.
축을 빼고 작게 그리면 스파크라인이 돼요.

사용법

tsx

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

<LineChart
  series={[{ id: 'price', data: prices, color: '#F04452' }]}
  xAxis={{ data: dates }}
  area="gradient"
  scrubber={{ showValues: true, valueFormatter: (v) => `${v.toLocaleString()}원` }}
/>

속성

속성	타입	기본값	설명
`series`	`readonly { id: string; data: (number \| null)[]; label?: string; color?: string }[]`	—	그릴 데이터. data[i]는 x 위치 i의 값이고 null은 빈 구간이에요.
`height`	`number`	`240`	차트 높이(px).
`width`	`number`	—	비우면 부모 너비를 꽉 채워요(ResizeObserver).
`inset`	`number \| { top, right, bottom, left }`	`8`	SVG 가장자리와 그림 영역 사이 여백.
`xAxis`	`{ data?, scaleType?, bandPadding? }`	—	x 라벨(날짜 등)과 축 종류.
`yAxis`	`{ domain?: { min?, max? }, includeZero?, nice? }`	—	값 범위를 고정하거나 0을 포함시켜요.
`stacked`	`boolean`	`false`	계열을 위로 쌓아요(양수는 위, 음수는 아래).
`showXAxis / showYAxis`	`boolean \| XAxisProps \| YAxisProps`	—	축 표시. 객체로 세부 옵션을 넘길 수 있어요.
`scrubber`	`boolean \| ScrubberProps`	—	마우스·손가락을 따라가는 선과 값 말풍선.
`onScrubberPositionChange`	`(index: number \| null) => void`	—	짚은 위치가 바뀔 때. 헤더 가격 연동에 써요.
`legend`	`boolean \| 'top' \| 'bottom'`	`false`	계열 범례.
`animate`	`boolean`	`true`	처음 그릴 때 애니메이션(동작 줄이기 설정이면 꺼져요).
`palette`	`readonly string[]`	—	계열 기본 색 목록.
`curve`	`'monotone' \| 'linear' \| 'step' \| 'stepBefore' \| 'stepAfter'`	`'monotone'`	monotone은 부드럽지만 데이터에 없는 고점·저점을 만들지 않아요.
`area`	`'none' \| 'gradient' \| 'solid'`	`'none'`	선 아래 채우기.
`strokeWidth`	`number`	`2`	선 두께.
`connectNulls`	`boolean`	`false`	null 구간을 건너뛰고 이어서 그려요.

AreaChart →쌓이는 값을 영역으로