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

# ComposedChart

> API reference for the ComposedChart component

ComposedChart allows you to combine multiple chart types (Line, Area, Bar, Scatter) in a single chart.

```tsx theme={null}
import { ComposedChart, Line, Area, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';

const data = [
  { name: 'Jan', uv: 400, pv: 2400, amt: 2400 },
  { name: 'Feb', uv: 300, pv: 1398, amt: 2210 },
  { name: 'Mar', uv: 200, pv: 9800, amt: 2290 },
  { name: 'Apr', uv: 278, pv: 3908, amt: 2000 },
];

<ComposedChart width={600} height={400} data={data}>
  <CartesianGrid stroke="#f5f5f5" />
  <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>
```

## Props

<ParamField path="data" type="array">
  The source data. Each element should be an object.
</ParamField>

<ParamField path="width" type="number | string">
  The width of chart container. Can be a number or a percent string like "100%".
</ParamField>

<ParamField path="height" type="number | string">
  The height of chart container. Can be a number or a percent string like "100%".
</ParamField>

<ParamField path="layout" type="'horizontal' | 'vertical'" default="horizontal">
  The layout of chart defines the orientation of axes, graphical items, and tooltip.
</ParamField>

<ParamField path="margin" type="object" default="{top: 5, right: 5, bottom: 5, left: 5}">
  Empty space around the container.

  <Expandable title="properties">
    <ParamField path="top" type="number" />

    <ParamField path="right" type="number" />

    <ParamField path="bottom" type="number" />

    <ParamField path="left" type="number" />
  </Expandable>
</ParamField>

<ParamField path="barCategoryGap" type="number | string" default="10%">
  The gap between two bar categories, which can be a percent value or a fixed value.
</ParamField>

<ParamField path="barGap" type="number | string" default="4">
  The gap between two bars in the same category.
</ParamField>

<ParamField path="barSize" type="number | string">
  The width or height of each bar. If the barSize is not specified, the size of the bar will be calculated by the barCategoryGap, barGap and the quantity of bar groups.
</ParamField>

<ParamField path="maxBarSize" type="number">
  The maximum width of all the bars in a horizontal BarChart, or maximum height in a vertical BarChart.
</ParamField>

<ParamField path="stackOffset" type="'sign' | 'expand' | 'none' | 'wiggle' | 'silhouette' | 'positive'" default="none">
  The type of offset function used to generate the lower and upper values in the series array. Only applicable for stacked Area or Bar charts.
</ParamField>

<ParamField path="reverseStackOrder" type="boolean" default="false">
  If `false`, stacked items will be rendered left to right. If `true`, stacked items will be rendered right to left.
</ParamField>

<ParamField path="syncId" type="number | string">
  Charts with the same syncId will synchronize Tooltip and Brush events.
</ParamField>

<ParamField path="syncMethod" type="'index' | 'value' | function" default="index">
  Customize how the charts will synchronize tooltips and brushes.
</ParamField>

<ParamField path="accessibilityLayer" type="boolean" default="true">
  Turn on accessibility support for keyboard-only and screen reader users.
</ParamField>

<ParamField path="responsive" type="boolean" default="false">
  If true, then it will listen to container size changes and adapt the SVG chart accordingly.
</ParamField>

<ParamField path="className" type="string">
  CSS class name for the chart container.
</ParamField>

<ParamField path="style" type="CSSProperties">
  Inline CSS styles for the chart container.
</ParamField>

<ParamField path="id" type="string">
  The unique id of chart.
</ParamField>

<ParamField path="throttleDelay" type="number | 'raf'" default="'raf'">
  Decides the time interval to throttle events. Number in milliseconds or 'raf' for requestAnimationFrame.
</ParamField>

<ParamField path="onClick" type="function">
  The customized event handler of click in this chart.
</ParamField>

<ParamField path="onMouseEnter" type="function">
  The customized event handler of mouseenter in this chart.
</ParamField>

<ParamField path="onMouseMove" type="function">
  The customized event handler of mousemove in this chart.
</ParamField>

<ParamField path="onMouseLeave" type="function">
  The customized event handler of mouseleave in this chart.
</ParamField>