Recharts Composed Bar + Line
ApexCharts and Chart.js both let you mix bars and lines in a single chart, but Recharts' `<ComposedChart>` is the cleanest declarative implementation in the React ecosystem — drop a `<Bar>` and a `<Line>` (or `<Area>`) inside the same chart and they share the cartesian axes, grid
Template details
- chart
- composed
- bar
- line
- dual-axis
- recharts
- react
When to use this template
This visualization excels at showing the relationship between a discrete quantity and a continuous rate or percentage over a shared dimension, often time. It helps analysts understand how changes in a base count or total might influence, or be influenced by, a related efficiency or performance ratio, revealing trends and anomalies in their combined behavior.
- Time-series or categorical data for the primary axis
- One metric representing discrete counts or totals
- A second metric representing rates, percentages, or ratios
- Metrics with distinct scales requiring dual Y-axes
- Data where the bar metric provides context for the line metric
- Relatively few categories (e.g., < 50) on the primary axis