Area charts

Dataviz logo representing a Area chart.

An area chart displays the evolution of one numeric variables. It is like a line chart, but with the area below the line being filled.

This section describes how to build area charts on the web with d3.js and react. It starts very basic and then explains how to add more complex features like brushing, adding hover effects and more.

Useful links

The Data

The dataset required to build a line chart is usually an array where each item is an object providing the x and the y values of the data point.

Here is a minimal example:

const data = [
  {x:1, y: 90},
  {x: 2, y: 12},
  {x: 3, y: 34},
  {x: 4, y: 53},
  {x: 5, y: 98},

Note: if your data is in .csv format, you can translate it thanks to the d3.csv() function as suggested here.

Note: a line chart is often made to represent time. If your x property is a date, please visit the timeseries section.

Timeseries section

First basic example

An area chart can be built using almost the same process as for a line chart. Component skeleton, scales, and axes are exactly the same. See the dedicated section for thorough explanations.

Line Chart section

The only difference is the use of d3.area() instead of d3.line(). Both functions are used to transform a blob of data into a string that can be used as the d argument of a path SVG shape.

But d3.area() is invoked slightly differently:

// create a shape generator.
// areaBuilder will be a function that takes data as input and returns a SVG path
const areaBuilder = d3
  .x(d => xScale(d.x))
  .y1(d => yScale(d.y))

// call the function with the dataset
const areaPath = areaBuilder(data);

Both a y0 and a y1 arguments are used. They provide both the bottom and the top position of the shape for each x position.

The output areaPath can now be passed to a path resulting in the following area chart:

A very basic area chart made using react and the area() function of d3.js

Area chart inspiration

If you're looking for inspiration to create your next Area chart, note that showcases many examples. Definitely the best place to get ... inspiration! showcases hundreds of stunning dataviz projects. Have a look to get some ideas on how to make your Area chart looks good!




👋 Hey, I'm Yan and I'm currently working on this project!

Feedback is welcome ❤️. You can fill an issue on Github, drop me a message on Twitter, or even send me an email pasting with You can also subscribe to the newsletter to know when I publish more content!