Composed Chart

Composed charts let you mix multiple chart types — Area, Bar, Line, and Scatter — in a single container.

Simple Composed Chart

A composed chart with Area, Bar, and Line series.

Usage

Use <ComposedChart> instead of a specific chart container. Place any combination of <Area>, <Bar>, <Line>, or <Scatter> inside:

<ComposedChart :data="data">
  <CartesianGrid stroke-dasharray="3 3" />
  <XAxis data-key="name" />
  <YAxis />
  <Tooltip />
  <Area data-key="amt" fill="#f97316" stroke="#f97316" :fill-opacity="0.3" />
  <Bar data-key="pv" fill="#14b8a6" :bar-size="20" />
  <Line data-key="uv" stroke="#f59e0b" />
</ComposedChart>

Series paint in template order: a series declared later covers the ones declared before it. See the Z-Order and Layers guide for details.

ComposedChart props

<ComposedChart> takes the chart container props, including bar sizing. Its tooltip always follows the category axis.