Stacked Area Chart

Learn how to draw a stacked area chart using d3.stack in D3.js.

Introduction

Let’s explore an important type of area chart, a stacked area chart. Stacked area charts are used to represent different values over time. It is used for showing trends over time among related attributes. Multiple related attributes are included in the stacked area chart, and they are all stacked upon each other. Before drawing a stacked area chart, let’s explore an API that is necessary to draw a stacked area chart.

Stacked generator

To create a stack in an area chart, we need to compute the y-value for each layer in the stacked area chart.

Thankfully, D3.js provides a stack generator, d3.stack(), that does this computation for us. Let’s see it in the following example where we have dummy data of a hospital in which we have three types of patients and we have to make three layers, one for each of them.

Get hands-on with 1200+ tech skills courses.