ComposedChart

개요

ComposedChart는 recharts의 ComposedChart를 얇게 래핑한 컨테이너입니다. 하나의 차트에 Bar, Line, Area, Scatter 등 여러 시리즈 타입을 조합할 수 있습니다.

시리즈 혼합 — Bar + Line 조합으로 값과 추이를 동시 표현
이중 Y축 지원 — yAxisId로 좌/우 축 매핑

언제 사용하나요

절대값 + 추이 — 매출(막대) + 성장률(라인)
다른 스케일의 두 지표 — 이중 Y축으로 서로 다른 단위 비교
누적 + 추세선 — Stacked Area + Line 조합

언제 사용하면 안 되나요

단일 시리즈 타입 → 해당 전용 차트 (BarChart, LineChart)
3개 이상의 이질적 시리즈 → 여러 차트로 분리가 더 가독성 높음

Usage

Bar + Line 조합

() => {
const data = [
  { month: '1월', revenue: 4200, growth: 12 },
  { month: '2월', revenue: 3800, growth: -9 },
  { month: '3월', revenue: 5200, growth: 37 },
  { month: '4월', revenue: 4780, growth: -8 },
  { month: '5월', revenue: 3890, growth: -19 },
  { month: '6월', revenue: 4390, growth: 13 },
];
return (
  <ResponsiveContainer width="100%" height={300}>
    <ComposedChart data={data}>
      <CartesianGrid />
      <XAxis dataKey="month" />
      <YAxis yAxisId="left" />
      <YAxis yAxisId="right" orientation="right" />
      <Bar yAxisId="left" dataKey="revenue" fill="$primary-50" />
      <Line yAxisId="right" type="monotone" dataKey="growth" stroke="$support-error-3" strokeWidth={2} />
      <ChartTooltip />
      <ChartLegend />
    </ComposedChart>
  </ResponsiveContainer>
);
}

Bar + Line + Area 혼합

노출(Area), 클릭(Bar), CTR(Line) 세 타입을 한 차트에 겹칩니다.

() => {
const data = [
  { week: '1주차', 노출: 45000, 클릭: 3200, ctr: 7.1 },
  { week: '2주차', 노출: 52000, 클릭: 4100, ctr: 7.9 },
  { week: '3주차', 노출: 48000, 클릭: 3600, ctr: 7.5 },
  { week: '4주차', 노출: 61000, 클릭: 5200, ctr: 8.5 },
  { week: '5주차', 노출: 57000, 클릭: 4800, ctr: 8.4 },
  { week: '6주차', 노출: 68000, 클릭: 6100, ctr: 8.9 },
];
return (
  <ResponsiveContainer width="100%" height={300}>
    <ComposedChart data={data}>
      <CartesianGrid />
      <XAxis dataKey="week" />
      <YAxis yAxisId="left" />
      <YAxis yAxisId="right" orientation="right" />
      <Area yAxisId="left" type="monotone" dataKey="노출" fill="$primary-10" stroke="$primary-30" name="노출수" />
      <Bar yAxisId="left" dataKey="클릭" fill="$primary-50" name="클릭수" />
      <Line yAxisId="right" type="monotone" dataKey="ctr" stroke="$teal-50" strokeWidth={2} name="CTR (%)" />
      <ChartTooltip />
      <ChartLegend />
    </ComposedChart>
  </ResponsiveContainer>
);
}

기준선과 함께

yAxisId마다 별개의 ReferenceLine을 배치할 수 있습니다.

() => {
const data = [
  { week: '1주차', reach: 12000, cpr: 320 },
  { week: '2주차', reach: 18500, cpr: 280 },
  { week: '3주차', reach: 15200, cpr: 305 },
  { week: '4주차', reach: 22000, cpr: 245 },
  { week: '5주차', reach: 19800, cpr: 260 },
  { week: '6주차', reach: 26000, cpr: 215 },
];
return (
  <ResponsiveContainer width="100%" height={300}>
    <ComposedChart data={data}>
      <CartesianGrid />
      <XAxis dataKey="week" />
      <YAxis yAxisId="left" />
      <YAxis yAxisId="right" orientation="right" />
      <Bar yAxisId="left" dataKey="reach" fill="$primary-50" name="도달수" />
      <Line yAxisId="right" type="monotone" dataKey="cpr" stroke="$teal-50" strokeWidth={2} name="CPR" />
      <ReferenceLine yAxisId="left" y={20000} stroke="$support-error-3" label="목표" />
      <ReferenceLine yAxisId="right" y={270} stroke="$lightBlue-40" label="CPR 한도" />
      <ChartTooltip />
      <ChartLegend />
    </ComposedChart>
  </ResponsiveContainer>
);
}

Area + Line 조합

() => {
const data = [
  { month: '1월', target: 3000, actual: 2800 },
  { month: '2월', target: 3500, actual: 3200 },
  { month: '3월', target: 4000, actual: 4100 },
  { month: '4월', target: 4500, actual: 4300 },
  { month: '5월', target: 5000, actual: 5200 },
];
return (
  <ResponsiveContainer width="100%" height={280}>
    <ComposedChart data={data}>
      <CartesianGrid />
      <XAxis dataKey="month" />
      <YAxis />
      <Area type="monotone" dataKey="target" fill="$gray-30" stroke="$gray-50" fillOpacity={0.3} />
      <Line type="monotone" dataKey="actual" stroke="$primary-50" strokeWidth={2} />
      <ChartTooltip />
      <ChartLegend />
    </ComposedChart>
  </ResponsiveContainer>
);
}

Props

recharts ComposedChart를 래핑합니다. 여기에 명시되지 않은 props는 recharts ComposedChart API를 참고하세요.

extends recharts ComposedChart

Prop

Type

자식 시리즈는 Bar, Line, Area, Scatter 문서를 참고하세요.

ComposedChart

On this page