Filling an Area Under the Graph

Lines are all very well and good, but that’s not the whole story for graphs. Sometimes, you’ve just got to go with a fill.

Filling an area with a solid color isn’t too hard. We did it by mistake back a few pages when we were trying to draw a line.

But to do it in a nice coherent way is fairly straightforward.

It takes three sections of code in much the same way that we drew our grid lines earlier:

1. One in the CSS section to define what style the area will have.
2. One to define the functions that generate the area.
3. One to draw the area.

The end result will look a bit like this: