Recharts Stacked Bar
A vertical stacked bar — every category's bar is split into 4 horizontally-stacked segments, with the segment heights summing to the category total. All `<Bar>` components share `stackId`, Recharts auto-stacks them in render order, and the legend keys the colours to the segment n
Template details
- chart
- bar
- stacked
- categorical
- recharts
- react
When to use this template
This visualization makes it obvious how individual components contribute to an overall sum, allowing for a clear understanding of both the total magnitude of a primary category and its internal composition. Analysts reach for it when they need to compare absolute totals across categories while simultaneously tracking the proportional breakdown of those totals into distinct segments. It is ideal for identifying trends in overall volume alongside shifts in the internal distribution of components.
- Categorical primary dimension with 2-5 distinct segments per category.
- Absolute quantitative values for each segment, summing to a meaningful total.
- Time-series data showing segment evolution over discrete periods.
- Comparing segment contributions across multiple independent groups or entities.
- Data where both total magnitude and internal composition are equally important.
- Discrete counts or monetary values rather than percentages or ratios.