DcComposedChart

Dark Mode

막대와 라인을 조합하는 복합 차트입니다. 음수 영역 해칭 패턴, 수평 참조선을 지원합니다. Cash Flow 등 대시보드에서 바+라인 동시 시각화에 사용합니다.

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

인터랙티브 데모

막대와 라인을 조합한 복합 차트입니다. Cash Flow 패턴에서는 음수 영역 해칭을 확인하세요.

투자금액

회수금액

순현금흐름

tsx

<DcComposedChart
  data={data}
  bars={[
    { dataKey: "investment", name: "투자금액", color: CHART_COLORS.primary },
    { dataKey: "recovery", name: "회수금액", color: CHART_COLORS.primaryLight },
  ]}
  lines={[
    { dataKey: "net", name: "순현금흐름", color: CHART_COLORS.black },
  ]}
  xKey="year"
  negativeHatch={true}
  referenceLineY={0}
  height={300}
  formatter={(v) => `${v}억`}
/>

Variants

negativeHatch와 referenceLineY를 조합하여 다양한 패턴을 만들 수 있습니다.

기본 (Bar + Line)

음수 해칭 + 참조선

Props

DcComposedChart

Prop	Type	Required	Default	설명
`data`	`Record<string, unknown>[]`	✓	—	차트 데이터 배열
`bars`	`BarConfig[]`	—	—	막대 설정 목록 (DcBarChart와 동일 BarConfig)
`lines`	`LineConfig[]`	—	—	라인 설정 목록 (DcLineChart와 동일 LineConfig)
`xKey`	`string`	—	"name"	X축 데이터 키
`negativeHatch`	`boolean`	—	false	음수 영역에 빗금 해칭 패턴 표시
`referenceLineY`	`number`	—	—	수평 참조선 Y 값 (예: 0)
`negativeMin`	`number`	—	-500	음수 영역 하한값 (negativeHatch 사용 시)
`height`	`number`	—	300	차트 높이 (px)
`curveType`	`"monotone" \| "linear" \| "natural" \| "step"`	—	"monotone"	라인 곡선 보간 타입
`formatter`	`(value: number) => string`	—	—	툴팁 값 포맷터
`className`	`string`	—	—	추가 CSS 클래스