차트
PercentageBarChart
포트폴리오 비중, 매수·매도 체결 강도, 롱/숏 비율처럼 합이 100%인 값을 보여줘요.
구간이나 범례에 마우스를 올리면 그 부분만 강조돼요.
매수62.4%매도37.6%
국내42%해외31%코인17%현금10%
사용법
import { PercentageBarChart } from '@funnest/charts-react';
<PercentageBarChart
data={[
{ id: 'buy', label: '매수', value: 62.4, color: '#F04452' },
{ id: 'sell', label: '매도', value: 37.6, color: '#3182F6' },
]}
/>속성
| 속성 | 타입 | 기본값 | 설명 |
|---|---|---|---|
data | { id, label, value, color? }[] | — | 구간 목록. 음수는 0으로 봐요. |
barHeight | number | 10 | 막대 두께. |
gap | number | 2 | 구간 사이 간격. |
showLabels | boolean | true | 아래 범례와 퍼센트. |
formatLabel | (item, fraction) => string | — | 라벨 형식. 기본은 "62.4%". |