Stacked Area Chart
Multiple area series stacked on top of each other to show cumulative totals over time.
◆Configuring Stacked Series with stackId
Give all <Area> components the same stackId='1' prop to stack them cumulatively on top of one another.
<Area type="monotone" dataKey="organic" stackId="1" stroke="#00e5a0" fill="#00e5a0" fillOpacity={0.6} />
<Area type="monotone" dataKey="paid" stackId="1" stroke="#4a9eff" fill="#4a9eff" fillOpacity={0.6} />◆Excel vs React Recharts Implementation
Unlike Excel where stacked area series require manual table transposition, Recharts naturally stacks any array of objects using simple dataKey bindings and stackId matching.
A Stacked Area Chart is ideal for developers and designers who need to display data clearly and effectively. Use this chart type when:
- ✓Showing volume trends over time (e.g. cumulative revenue)
- ✓Comparing two or more metrics with stacked areas
- ✓Highlighting the magnitude of change, not just direction
- ✓Displaying website traffic patterns over weeks or months
What is a stacked area chart?
A stacked area chart displays multiple series stacked one on top of the other, showing both the total cumulative trend and the individual contribution of each component series over time.
How does a stacked area chart in React Recharts compare to Microsoft Excel?
In Microsoft Excel, stacked area charts often require dedicated table formatting and rigid formatting dialogs. In React with Recharts, stacking is completely dynamic: assigning stackId='1' to any series automatically stacks the areas with full responsiveness, smooth monotone interpolation, custom SVG gradients, and dark-mode compatibility.
Can stacked area charts handle negative values?
In general, stacked area charts work best with non-negative values because stacking positive and negative areas can lead to overlapping visual occlusions. For datasets with significant positive and negative swings, a clustered bar chart or dual-axis line chart is usually recommended.