DcLineChart

Dark Mode

라인 차트 컴포넌트입니다. 실선/점선/대시 라인 스타일, 영역 채움(area), 데이터 포인트 Dot, 크로스헤어를 지원합니다.

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

인터랙티브 데모

라인 스타일, 영역 채움, 크로스헤어 등 다양한 옵션을 확인하세요.

tsx

<DcLineChart
  data={data}
  lines={[
    { dataKey: "a", name: "시리즈 A", color: CHART_COLORS.primary, showDots: true },
    { dataKey: "b", name: "시리즈 B", color: CHART_COLORS.indigo, showDots: true },
    { dataKey: "c", name: "시리즈 C", color: CHART_COLORS.mint, showDots: true },
  ]}
  height={280}
/>

Variants

라인 스타일과 영역 채움을 조합하여 다양한 시각화를 만들 수 있습니다.

Single Line

Area Fill

Multi Line + Dots

Dashed Styles

Props

DcLineChart

Prop	Type	Required	Default	설명
`data`	`Record<string, unknown>[]`	✓	—	차트 데이터 배열
`lines`	`LineConfig[]` interface LineConfig { dataKey: string; color?: string; name?: string; strokeStyle?: "solid" \| "dashed" \| "dotted"; strokeWidth?: number; showDots?: boolean; dotSize?: number; area?: boolean; areaOpacity?: number; }	✓	—	라인 설정 목록
`xKey`	`string`	—	"name"	X축 데이터 키
`curveType`	`"monotone" \| "linear" \| "natural" \| "step"`	—	"monotone"	곡선 보간 타입
`showCrosshair`	`boolean`	—	false	호버 시 세로 참조선 표시
`referenceLineX`	`string \| number`	—	—	고정 세로 참조선 X 값
`height`	`number`	—	300	차트 높이 (px)
`showGrid`	`boolean`	—	true	그리드 표시 여부
`showTooltip`	`boolean`	—	true	툴팁 표시 여부
`formatter`	`(value: number) => string`	—	—	툴팁 값 포맷터
`className`	`string`	—	—	추가 CSS 클래스