Building an area chart relies on the
d3.area() helper function. If you're not familiar with it, have a look to shape section of the gallery to understand its basics. Then follow the examples below to put it in practice.
Add line and dot
Highlight the main trend with a line on top of the area. And display individual information with dots.
Note: Another common problem is to switch between dataset. This is extensively described in the line chart section. You just have to replace
d3.area() to get the same features.
Brushing and zooming
Most common use for area chart is zooming: it allows to explore a specific part of your data more in details.
A few blocks with more complicated codes to showcase what's possible to do with area charts
A simple Area chart by Mike Bostock, d3.js creator. Note the observable format to produce the chart and providing the code.