@baneung-pack

모양 변형

시리즈별 다른 모양 — `pointStyle` 배열로 색약 사용자도 형태로 구분 가능 (개발팀=▲, 디자인팀=◆)

deptcareersalary
개발팀2년3800만원
개발팀5년5700만원
개발팀8년7200만원
개발팀12년9500만원
디자인팀3년4000만원
디자인팀6년5200만원
디자인팀10년6500만원
디자인팀14년7800만원

API

ScatterChartProps

PropertyType기본값설명
xKeystring필수X 좌표 키
yKeystring필수Y 좌표 키
groupKeystring-시리즈 그룹 키. 같은 값끼리 한 시리즈(같은 색)로 묶임
labelsRecord<string, string>-groupKey 값 → 표시명 매핑
pointRadiusnumber5점 반지름 (px)
pointStyleScatterPointStyle | ScatterPointStyle[]'circle'점 모양. 단일 값 또는 시리즈별 배열. 'circle' | 'triangle' | 'rect' | 'rectRot' | 'star' | 'cross' | 'crossRot' | 'rectRounded' | 'dash' | 'line'
xUnitstring-X축 ticks suffix (예: "cm")
yUnitstring-Y축 ticks suffix (예: "kg")

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 (스크린리더가 먼저 읽음)