Adding Grid Lines to a Graph

Adding grid lines

Gridlines are an important feature for some graphs, as they allow the eye to associate three analog scales (the x and y-axis and the displayed line).

There is currently a tendency to use graphs without gridlines online, as it gives the appearance of a “cleaner” interface, but they are still widely used and a necessary component for graphing.

This is what we’re going to draw:

We’ll start with our default code for our simple graph.

How to build grid lines?

We’re going to use the axis function to generate two more axis elements (one for x and one for y), but for these ones, instead of drawing the main lines and the labels, we’re just going to draw the tick lines. It will be really long tick lines. (I’m considering calling them “long cat lines.”)

To create them, we have to add 3 separate blocks of code.

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

The grid line CSS

This is the total styling that we ...