Composed chart

Examples and usage of ComposedChart component

The ComposedChart component allows you to combine multiple chart types (Line, Bar, Area, and Scatter) in a single chart. It’s useful for comparing different data series with different visualization styles.

Basic composed chart

import { ComposedChart, Line, Bar, Area, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';

const data = [
  { name: 'Page A', uv: 590, pv: 800, amt: 1400 },
  { name: 'Page B', uv: 868, pv: 967, amt: 1506 },
  { name: 'Page C', uv: 1397, pv: 1098, amt: 989 },
  { name: 'Page D', uv: 1480, pv: 1200, amt: 1228 },
  { name: 'Page E', uv: 1520, pv: 1108, amt: 1100 },
  { name: 'Page F', uv: 1400, pv: 680, amt: 1700 },
];

function Example() {
  return (
    <ComposedChart width={600} height={300} data={data}>
      <CartesianGrid strokeDasharray="3 3" />
      <XAxis dataKey="name" />
      <YAxis />
      <Tooltip />
      <Legend />
      <Area type="monotone" dataKey="amt" fill="#8884d8" stroke="#8884d8" />
      <Bar dataKey="pv" barSize={20} fill="#413ea0" />
      <Line type="monotone" dataKey="uv" stroke="#ff7300" />
    </ComposedChart>
  );
}

Line and bar combination

<ComposedChart width={600} height={300} data={data}>
  <CartesianGrid strokeDasharray="3 3" />
  <XAxis dataKey="name" />
  <YAxis />
  <Tooltip />
  <Legend />
  <Bar dataKey="pv" fill="#8884d8" />
  <Line type="monotone" dataKey="uv" stroke="#ff7300" />
</ComposedChart>

Multiple Y axes

<ComposedChart width={600} height={300} data={data}>
  <CartesianGrid strokeDasharray="3 3" />
  <XAxis dataKey="name" />
  <YAxis yAxisId="left" />
  <YAxis yAxisId="right" orientation="right" />
  <Tooltip />
  <Legend />
  <Bar yAxisId="left" dataKey="pv" fill="#8884d8" />
  <Line yAxisId="right" type="monotone" dataKey="uv" stroke="#ff7300" />
</ComposedChart>

When using multiple Y axes, specify yAxisId on both the axis and the chart elements to link them together.

Area and line overlay

<ComposedChart width={600} height={300} data={data}>
  <CartesianGrid strokeDasharray="3 3" />
  <XAxis dataKey="name" />
  <YAxis />
  <Tooltip />
  <Legend />
  <Area type="monotone" dataKey="amt" fill="#8884d8" stroke="#8884d8" fillOpacity={0.3} />
  <Line type="monotone" dataKey="uv" stroke="#ff7300" strokeWidth={2} />
  <Line type="monotone" dataKey="pv" stroke="#387908" strokeWidth={2} />
</ComposedChart>

Stacked bars with line

<ComposedChart width={600} height={300} data={data}>
  <CartesianGrid strokeDasharray="3 3" />
  <XAxis dataKey="name" />
  <YAxis />
  <Tooltip />
  <Legend />
  <Bar dataKey="pv" stackId="a" fill="#8884d8" />
  <Bar dataKey="uv" stackId="a" fill="#82ca9d" />
  <Line type="monotone" dataKey="amt" stroke="#ff7300" />
</ComposedChart>

With scatter plot

import { Scatter } from 'recharts';

<ComposedChart width={600} height={300} data={data}>
  <CartesianGrid strokeDasharray="3 3" />
  <XAxis dataKey="name" />
  <YAxis />
  <Tooltip />
  <Legend />
  <Bar dataKey="pv" fill="#8884d8" />
  <Line type="monotone" dataKey="uv" stroke="#ff7300" />
  <Scatter dataKey="amt" fill="red" />
</ComposedChart>

Vertical (horizontal layout)

<ComposedChart 
  layout="horizontal" 
  width={600} 
  height={300} 
  data={data}
>
  <CartesianGrid strokeDasharray="3 3" />
  <XAxis type="number" />
  <YAxis type="category" dataKey="name" />
  <Tooltip />
  <Legend />
  <Area type="monotone" dataKey="amt" fill="#8884d8" stroke="#8884d8" />
  <Bar dataKey="pv" barSize={20} fill="#413ea0" />
  <Line dataKey="uv" stroke="#ff7300" />
</ComposedChart>

With reference lines

import { ReferenceLine } from 'recharts';

<ComposedChart width={600} height={300} data={data}>
  <CartesianGrid strokeDasharray="3 3" />
  <XAxis dataKey="name" />
  <YAxis />
  <Tooltip />
  <Legend />
  <ReferenceLine y={1000} stroke="red" strokeDasharray="3 3" label="Target" />
  <Bar dataKey="pv" fill="#8884d8" />
  <Line type="monotone" dataKey="uv" stroke="#ff7300" />
</ComposedChart>

Different data scales

Shared scale

<ComposedChart width={600} height={300} data={data}>
  <XAxis dataKey="name" />
  <YAxis />
  <Tooltip />
  <Legend />
  <Bar dataKey="pv" fill="#8884d8" />
  <Line type="monotone" dataKey="uv" stroke="#ff7300" />
</ComposedChart>

Common pitfalls

• Y-axis mismatch: When combining elements with different value ranges, use separate Y axes with yAxisId to prevent scaling issues.
• Z-index layering: Chart elements are rendered in the order they appear. Place areas first, then bars, then lines to prevent overlap issues.
• Tooltip event type: ComposedChart supports only 'axis' tooltip event type.
• Mixed layouts: Don’t mix layout="horizontal" bars with layout="vertical" lines in the same chart.