> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/recharts/recharts/llms.txt
> Use this file to discover all available pages before exploring further.

# 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

```jsx theme={null}
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

```jsx theme={null}
<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

```jsx theme={null}
<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>
```

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

## Area and line overlay

```jsx theme={null}
<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

```jsx theme={null}
<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

```jsx theme={null}
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)

```jsx theme={null}
<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

```jsx theme={null}
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

<CodeGroup>
  ```jsx Shared scale theme={null}
  <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>
  ```

  ```jsx Independent scales theme={null}
  <ComposedChart width={600} height={300} data={data}>
    <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>
  ```
</CodeGroup>

## 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.