Chart · Props
@baneung-pack/chart의 전체 props 레퍼런스 (Bar / Line / Area / Pie / Doughnut).
ChartBaseProps (공통)
| Property | Type | 기본값 | 설명 |
|---|---|---|---|
| data | Record<string, unknown>[] | 필수 | 차트 데이터 배열 |
| height | number | 300 | 차트 높이(px). 너비는 부모 100% |
| colors | readonly string[] | DEFAULT_COLORS | 시리즈 컬러 팔레트 (navy/teal 기반 10색) |
| showGrid | boolean | true | 그리드 표시 (Pie/Doughnut에는 무시) |
| showLegend | boolean | true | 범례 표시 |
| showTooltip | boolean | true | 툴팁 표시 |
| emptyState | ReactNode | - | 빈 데이터일 때 표시 |
| className | string | - | 외부 wrapper className |
| valueFormat | 'plain' | 'comma' | 'korean' | (n: number) => string | 'plain' | 숫자 포맷 (tooltip / 라벨 / y축 tick 일관 적용). `korean` → 125만/1.2억, `comma` → 1,250,000, 함수로 단위 suffix 가능 |
| a11yTable | boolean | true | 접근성용 sr-only 데이터 테이블 자동 렌더 (스크린리더가 canvas 차트 데이터를 읽을 수 있게 함) |
| a11yCaption | string | - | sr-only 테이블 caption (스크린리더가 먼저 읽음) |
BarChartProps
| Property | Type | 기본값 | 설명 |
|---|---|---|---|
| xKey | string | 필수 | X축 키 |
| yKeys | string[] | 필수 | Y축 키들 (시리즈) |
| labels | Record<string, string> | - | 시리즈 표시명 (범례·툴팁) |
| horizontal | boolean | false | 가로 막대 모드 |
| stacked | boolean | false | 누적 표시 |
| showValues | boolean | false | 각 막대 중앙에 값 표시 |
LineChartProps
| Property | Type | 기본값 | 설명 |
|---|---|---|---|
| xKey | string | 필수 | X축 키 |
| yKeys | string[] | 필수 | Y축 키들 (시리즈) |
| labels | Record<string, string> | - | 시리즈 표시명 |
| smooth | boolean | false | 곡선 보간 (monotone) |
| showDots | boolean | true | 데이터 포인트 dot 표시 |
AreaChartProps
| Property | Type | 기본값 | 설명 |
|---|---|---|---|
| xKey | string | 필수 | X축 키 |
| yKeys | string[] | 필수 | Y축 키들 (시리즈) |
| labels | Record<string, string> | - | 시리즈 표시명 |
| smooth | boolean | true | 곡선 보간 (기본 true) |
| stacked | boolean | false | 누적 영역 |
| fillOpacity | number | 0.3 | 채움 투명도 (0~1) |
MixedChartProps
| Property | Type | 기본값 | 설명 |
|---|---|---|---|
| xKey | string | 필수 | X축 키 |
| barKeys | string[] | 필수 | 막대로 표시할 시리즈 키 |
| lineKeys | string[] | 필수 | 선으로 표시할 시리즈 키 |
| labels | Record<string, string> | - | 시리즈 라벨 |
| rightAxisKeys | string[] | [] | 우측 보조 y축에 매핑할 시리즈 키 (bar/line 둘 다 가능) |
| rightAxisPercent | boolean | false | 우측 y축을 0~100% 범위로 고정 + "%" 단위 표시 |
| smooth | boolean | false | 선 곡선 보간 |
| stacked | boolean | false | 막대 누적 |
| showValues | boolean | false | 막대 위에 값 라벨 표시 |
ScatterChartProps
| Property | Type | 기본값 | 설명 |
|---|---|---|---|
| xKey | string | 필수 | X 좌표 키 |
| yKey | string | 필수 | Y 좌표 키 |
| groupKey | string | - | 시리즈 그룹 키. 같은 값끼리 한 시리즈(같은 색)로 묶임 |
| labels | Record<string, string> | - | groupKey 값 → 표시명 매핑 |
| pointRadius | number | 5 | 점 반지름 (px) |
| pointStyle | ScatterPointStyle | ScatterPointStyle[] | 'circle' | 점 모양. 단일 값 또는 시리즈별 배열. 'circle' | 'triangle' | 'rect' | 'rectRot' | 'star' | 'cross' | 'crossRot' | 'rectRounded' | 'dash' | 'line' |
| xUnit | string | - | X축 ticks suffix (예: "cm") |
| yUnit | string | - | Y축 ticks suffix (예: "kg") |
RadarChartProps
| Property | Type | 기본값 | 설명 |
|---|---|---|---|
| axes | string[] | 필수 | 축으로 사용할 키 목록 |
| labelKey | string | 필수 | 시리즈 이름이 들어있는 키 (행=하나의 radar) |
| axisLabels | Record<string, string> | - | 축 키 → 표시명 매핑 |
| max | number | 자동 | 방사형 스케일 최대값 (외곽) |
| fillOpacity | number | 0.25 | 시리즈 채움 투명도 (0이면 외곽선만) |
| showLine | boolean | true | radar 외곽선 표시. false면 채움 영역만 보임 |
WaterfallChartProps
| Property | Type | 기본값 | 설명 |
|---|---|---|---|
| data | WaterfallStep[] | 필수 | 스텝 배열. `WaterfallStep`: { label, value?, total? } |
| positiveColor | string | #10B981 | 양수 기여 색상 (DEFAULT_COLORS의 emerald) |
| negativeColor | string | #EF4444 | 음수 기여 색상 (DEFAULT_COLORS의 red) |
| totalColor | string | #1F2937 | 시작/끝/소계 색상 (바능 navy-900 브랜드 메인) |
| showValues | boolean | false | 각 막대에 변화량(+/-) 표시 |
PieChartProps
| Property | Type | 기본값 | 설명 |
|---|---|---|---|
| nameKey | string | 필수 | 카테고리 이름 키 |
| valueKey | string | 필수 | 값 키 |
| innerRadius | number | 0 | 안쪽 비율(0~1). 0보다 크면 도넛. (chart.js cutout 매핑) |
| showValues | boolean | false | 조각 내부에 퍼센트 라벨 표시 (작은 조각은 자동 숨김) |
DoughnutChartProps
| Property | Type | 기본값 | 설명 |
|---|---|---|---|
| nameKey | string | 필수 | 카테고리 이름 키 |
| valueKey | string | 필수 | 값 키 |
| thickness | number | 0.6 | 도넛 안쪽 빈 비율 (0~1). 내부적으로 PieChart의 innerRadius로 전달 |
| showValues | boolean | false | 조각 내부에 퍼센트 라벨 표시 |