Recharts Stacked Area

A multi-series stacked area chart that shows both the per-segment magnitude and the total contour at every x-tick — every `<Area>` shares the same `stackId` so Recharts auto-stacks them on top of each other, the totals form the upper envelope, and the colours encode the segment c

Template details

  • chart
  • area
  • stacked
  • time-series
  • recharts
  • react

When to use this template

This visualization effectively reveals how individual categories contribute to an overall total over time, while simultaneously showing the trend of that total. It's ideal for understanding both the relative proportions of segments and their absolute impact on the aggregate, especially when both dynamics are important for analysis.

  • Time-series data or ordered categorical x-axis.
  • Multiple distinct categorical segments (ideally 3-7).
  • Quantitative y-axis representing magnitude or count.
  • When both segment proportions and total magnitude matter.
  • Data where segments sum up to a meaningful total.
  • Regularly sampled data points over time.

Browse all Koan templates