차트

AreaChart

자산 구성처럼 여러 값의 합과 변화를 함께 보여줄 때 좋아요.
stacked를 켜면 계열이 위로 쌓여요.

사용법

tsx

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

<AreaChart
  series={[
    { id: 'kr', label: '국내주식', data: kr },
    { id: 'us', label: '해외주식', data: us },
    { id: 'crypto', label: '코인', data: crypto },
  ]}
  stacked
  xAxis={{ data: months }}
  scrubber={{ showValues: true, valueFormatter: (v) => `${v}만` }}
/>

속성

속성	타입	기본값	설명
`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[]`	—	계열 기본 색 목록.
`fill`	`'gradient' \| 'solid'`	`'gradient'`	채우기 방식(stacked일 땐 solid).
`showLines`	`boolean`	`true`	영역 위쪽 경계선.
`curve`	`Curve`	`'monotone'`	곡선 방식.

← LineChart →가격 흐름을 선으로 BarChart →손익과 거래량을 막대로