Core
Composed Chart
A composed chart combines areas, bars, and lines in one surface so related metrics can be compared without switching chart types.
Example
Usage
Features
- Mixes bar, line, and area series in one component.
- Useful for comparing totals and trends together.
- Shares the same theme palette as the other chart components.
- Supports per-series type overrides.
- Keeps the visual system consistent across dashboard views.
Installation
Copy the shared chart utilities and the chart component you need into your project.
npx libravelui@latest add composed-chartAnatomy
import { ComposedChart } from "@/components/ui/core/charts/composed-chart";<ComposedChart
data={data}
dataKey="month"
config={{
revenue: { label: "Revenue", type: "bar" },
profit: { label: "Profit", type: "line" },
visitors: { label: "Visitors", type: "area" },
}}
/>Props
Loading types…
Edit on GitHub
Last updated on