Stacked area chart | the D3 Graph Gallery

Step by step

The hardest part in stacked area chart creation is the use of the d3.stack() function to stack the data. Once this step is done, each group can be added thanks to the d3.area() function. I strongly advise to understand how to do a basic area chart before trying the examples below.

Area chart

You probably want to understand how to build a basic area chart before trying the stacked version.

Stacked area from long input

The most basic stacked area chart you can do in d3.js. Keeping only the core code.

Input format:long (tidy)

Stacked area from wide input

Another basic stacked area chart made in d3.js.

Note that here the input format is wide (untidy): each group is provided in a specific column.

Template

A stacked area chart showing the evolution of a few baby names in the US. Zoom on a specific time frame through brushing. Highlight a specific group by hovering the legend. Double click to unzoom.

Code here

Alternative

The efficiency of stacked area graph is discussed and it must be used with care. They are great to study the evolution of the whole and the relative proportion of each group. However, they are not appropriate to study the evolution of each individual group. (Read more). Using small multiple is often a good alternative to highlight the evolution of each group.

Small multiple

Learn how to apply the small multiple technique on line plot. It allows to avoid the spaghetti plot where lines become unreadable.

Small multiple

Applying the small multiple technique to area chart. A good workaround to stacked area chart when you have several group to display.