차트

CartesianChart

LineChart, AreaChart, BarChart도 이 위에 만들어져 있어요.
Line, Area, BarPlot, XAxis, YAxis, ReferenceLine, Point, Scrubber를 자식으로 넣어 원하는 차트를 직접 조합하세요.

사용법

tsx

import { BarPlot, CartesianChart, Line, Scrubber, YAxis } from '@funnest/charts-react';

<CartesianChart
  series={[
    { id: 'vol', label: '거래량', data: volume, color: '#D1D6DB' },
    { id: 'price', label: '가격', data: prices },
  ]}
  xAxis={{ scaleType: 'band', data: dates }}
  enableScrubbing
>
  <BarPlot seriesIds={['vol']} />
  <Line seriesId="price" />
  <YAxis />
  <Scrubber seriesIds={['price']} showValues />
</CartesianChart>

속성

속성	타입	기본값	설명
`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`	계열을 위로 쌓아요(양수는 위, 음수는 아래).
`onScrubberPositionChange`	`(index: number \| null) => void`	—	짚은 위치가 바뀔 때. 헤더 가격 연동에 써요.
`legend`	`boolean \| 'top' \| 'bottom'`	`false`	계열 범례.
`animate`	`boolean`	`true`	처음 그릴 때 애니메이션(동작 줄이기 설정이면 꺼져요).
`palette`	`readonly string[]`	—	계열 기본 색 목록.
`enableScrubbing`	`boolean`	`false`	포인터를 추적해 Scrubber와 onScrubberPositionChange에 전달해요.
`children`	`ReactNode`	—	그릴 부품들. 순서대로 위에 겹쳐 그려요.

← PercentageBarChart →전체 중 비중을 막대 하나로 Sparkline →관심종목 목록의 작은 차트