DcScatterChart

Dark Mode

산점도 차트 컴포넌트입니다. 다중 시리즈, 점 크기 매핑(z축), 다양한 점 모양을 지원합니다.

import { DcScatterChart } from "@/shared/ui/widget/analytics/chart"

인터랙티브 데모

단일 시리즈, 다중 시리즈, 버블 차트를 전환하세요.

tsx

<DcScatterChart
  series={[{ name: "데이터", data: scatterData, color: CHART_COLORS.primaryLight }]}
  height={300}
/>

시리즈 수, 점 크기, 그리드 등을 조합할 수 있습니다.

No Grid

Multi Series

Prop	Type	Required	Default	설명
`series`	`ScatterSeries[]` interface ScatterSeries { name: string; data: { x: number; y: number; z?: number }[]; color?: string; }	✓	—	산점도 시리즈 배열
`dotSize`	`number`	—	60	점 크기 (z 값 미사용 시)
`shape`	`"circle" \| "diamond" \| "square" \| "triangle"`	—	"circle"	점 모양
`height`	`number`	—	300	차트 높이 (px)
`showGrid`	`boolean`	—	true	그리드 표시 여부
`showTooltip`	`boolean`	—	true	툴팁 표시 여부
`formatter`	`(value: number) => string`	—	—	툴팁 값 포맷터
`className`	`string`	—	—	추가 CSS 클래스