Charts
Composed Chart
Combine Area, Bar, and Line series in a single 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>
The rendering order follows the template order — elements declared later render on top. See the Z-Order and Layers guide for details.
ComposedChart props
| Prop | Type | Default | Description |
|---|---|---|---|
data | Array | [] | Data array for the chart |
width | number | — | Chart width (use ResponsiveContainer for responsive) |
height | number | — | Chart height |
margin | object | { top: 5, right: 5, bottom: 5, left: 5 } | Chart margins |
layout | 'horizontal' | 'vertical' | 'horizontal' | Layout direction |
syncId | string | — | Sync hover across charts with same ID |
syncMethod | 'index' | 'value' | — | How synced charts align tooltips |
barGap | number | string | '4' | Gap between bars in the same category |
barCategoryGap | number | string | '10%' | Gap between bar categories |
barSize | number | — | Default bar width |
stack-offset | string | — | Stack offset type (expand for 100% stacked) |