ChartLegend

Dark Mode

차트 하단 범례 컴포넌트 2종입니다. ChartLegend(바/선 차트용 인라인 범례)와 DonutLegend(도넛 차트용 테이블형 범례)를 제공합니다.

import { ChartLegend, DonutLegend } from "@/shared/ui/widget/analytics/chart"

ChartLegend

바/선 차트 하단에 배치하는 인라인 범례입니다. bar, line, dashed, dotted, area 5가지 인디케이터 타입을 지원합니다.

모든 인디케이터 타입

Bar

Line (solid)

Dashed

Dotted

Area

Cash Flow 패턴 (bar + line)

투자금액

회수금액

누적 순현금흐름

누적 차트 패턴 (solid + dashed)

누적 투자금액

누적 회수금액

시장가치(잔여주식)

tsx

<ChartLegend
  items={[
    { label: "투자금액", color: CHART_COLORS.primary, type: "bar" },
    { label: "회수금액", color: CHART_COLORS.primaryLight, type: "bar" },
    { label: "순현금흐름", color: CHART_COLORS.black, type: "line" },
    { label: "시장가치", color: CHART_COLORS.grey, type: "dashed" },
  ]}
/>

DonutLegend

도넛 차트 하단에 배치하는 테이블형 범례입니다. name, value, pct 컬럼과 HelpTooltip을 지원합니다.

보유120개58%

회수?70개34%

감액16개8%

tsx

<DonutLegend
  items={[
    { name: "보유", value: "120개", pct: "58%", color: CHART_COLORS.primary },
    { name: "회수", displayName: "회수", value: "70개", pct: "34%",
      color: CHART_COLORS.primaryLight, tooltip: "* 부분회수 포함" },
    { name: "감액", value: "16개", pct: "8%", color: CHART_COLORS.black },
  ]}
/>

Props

ChartLegend

Prop	Type	Required	Default	설명
`items`	`ChartLegendItem[]` interface ChartLegendItem { label: string; color: string; type?: "bar" \| "line" \| "dashed" \| "dotted" \| "area"; }	✓	—	범례 항목 배열
`className`	`string`	—	—	추가 CSS 클래스

DonutLegend

Prop	Type	Required	Default	설명
`items`	`DonutLegendItem[]` interface DonutLegendItem { name: string; displayName?: string; value: string; pct?: string; color: string; tooltip?: string; }	✓	—	범례 항목 배열
`className`	`string`	—	—	추가 CSS 클래스