차트
BarChart
x축이 칸(band)으로 나뉘는 막대 차트예요.
getBarColor로 막대마다 색을 정할 수 있어서 손익(빨강/파랑)이나 거래량에 잘 맞아요.
사용법
import { BarChart, ReferenceLine } from '@funnest/charts-react';
<BarChart
series={[{ id: 'pnl', label: '손익', data: dailyPnl }]}
xAxis={{ data: dates }}
getBarColor={(v) => (v >= 0 ? '#F04452' : '#3182F6')}
scrubber={{ showValues: true }}
>
<ReferenceLine dataY={0} dash="" />
</BarChart>속성
| 속성 | 타입 | 기본값 | 설명 |
|---|---|---|---|
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[] | — | 계열 기본 색 목록. |
getBarColor | (value, index, seriesId) => string | undefined | — | 막대별 색. undefined면 계열 색. |
radius | number | 3 | 막대 끝 모서리 둥글기(음수 막대는 아래쪽). |
groupGap | number | 2 | 여러 계열을 나란히 그릴 때 막대 사이 간격. |