@baneung-pack

혼합 (Pareto)

막대 + 선 혼합 차트. 우측 보조 y축 옵션으로 Pareto, 매출+누적% 등 듀얼 스케일 표현 가능.

category발생 건수누적 비율
UI 버그84021
성능 저하68038
데이터 정합성56052
호환성48064
접근성36073
보안 취약점28080
번역 누락20085
캐싱16089
로깅14092.5
디자인 토큰10095
기타200100

API

MixedChartProps

PropertyType기본값설명
xKeystring필수X축 키
barKeysstring[]필수막대로 표시할 시리즈 키
lineKeysstring[]필수선으로 표시할 시리즈 키
labelsRecord<string, string>-시리즈 라벨
rightAxisKeysstring[][]우측 보조 y축에 매핑할 시리즈 키 (bar/line 둘 다 가능)
rightAxisPercentbooleanfalse우측 y축을 0~100% 범위로 고정 + "%" 단위 표시
smoothbooleanfalse선 곡선 보간
stackedbooleanfalse막대 누적
showValuesbooleanfalse막대 위에 값 라벨 표시

ChartBaseProps

PropertyType기본값설명
dataRecord<string, unknown>[]필수차트 데이터 배열
heightnumber300차트 높이(px). 너비는 부모 100%
colorsreadonly string[]DEFAULT_COLORS시리즈 컬러 팔레트 (navy/teal 기반 10색)
showGridbooleantrue그리드 표시 (Pie/Doughnut에는 무시)
showLegendbooleantrue범례 표시
showTooltipbooleantrue툴팁 표시
emptyStateReactNode-빈 데이터일 때 표시
classNamestring-외부 wrapper className
valueFormat'plain' | 'comma' | 'korean' | (n: number) => string'plain'숫자 포맷 (tooltip / 라벨 / y축 tick 일관 적용). `korean` → 125만/1.2억, `comma` → 1,250,000, 함수로 단위 suffix 가능
a11yTablebooleantrue접근성용 sr-only 데이터 테이블 자동 렌더 (스크린리더가 canvas 차트 데이터를 읽을 수 있게 함)
a11yCaptionstring-sr-only 테이블 caption (스크린리더가 먼저 읽음)