React chart example
Stacked area
Show how a total changes over time and how each component contributes to it.
Options apply to compatible charts.
Synthetic sample data · Sales for 2 regions across 6 months.
What is a stacked area chart?
A stacked area chart shows how several components contribute to a changing total. The bands sit on top of one another: the top boundary is the combined value, while the thickness of each band represents one component. It combines a view of overall volume with a view of composition.
When to use it
Use it to show how a total and its composition change over time, such as traffic by channel, energy generation by source or sales by region. A few non-negative, additive series work best. Use separate lines to compare each group’s trajectory precisely, or stacked columns when you have only a few reporting periods.
Design tips
Keep a stable series order. Reordering the bands changes their shapes and makes a continuing series hard to follow.
Do not stack unrelated units, overlapping populations or rates that cannot be added. A total only means something if its parts can legitimately be summed.
Choose a 100% stacked view for changing shares, and ordinary stacking for changing volume. Use labels or tooltips when a thin band needs an exact reading.
Graphy Chart SDK
Add Graphy’s stacked area charts to your React app.
Ship quickly with one maintained SDK, without building and maintaining the entire charting experience yourself.