Dashboard
Composed Chart
Combine bar and line charts in one. Perfect for showing volume alongside trend lines.
Loading chart…
#composed#combo#bar#line#mixed
Customization Guides & Code Snippets
◆Setting Up Dual Y-Axes (Left vs Right)
Assign yAxisId='left' to high-volume metrics (like Bar volume) and yAxisId='right' with orientation='right' to secondary percentages or averages (like Line).
<YAxis yAxisId="left" stroke="#5c6370" />
<YAxis yAxisId="right" orientation="right" stroke="#5c6370" />
<Bar yAxisId="left" dataKey="volume" fill="#4a9eff" />
<Line yAxisId="right" type="monotone" dataKey="avg" stroke="#00e5a0" strokeWidth={2.5} />◆Custom Multi-Metric Tooltip
Recharts Tooltip automatically displays both the Bar and Line series in a unified hover card when using ComposedChart.
When to use a Composed Chart
A Composed Chart is ideal for developers and designers who need to display data clearly and effectively. Use this chart type when:
- ✓Building analytics overview pages with multiple metrics
- ✓SaaS product dashboards showing user activity
- ✓Business intelligence reporting screens
- ✓Admin panels with KPI summaries
Tips for Recharts Composed Chart
TIP 1Use a grid layout with consistent card sizes for visual rhythm
TIP 2Always show a time period selector (Today / 7d / 30d / 90d)
TIP 3Load charts progressively — KPI cards first, then charts
TIP 4Use skeleton loaders while data is fetching to prevent layout shift
TIP 5Keep color usage minimal — pick 2-3 accent colors maximum
Key Recharts Props