It's The Little Things That Matter: Axes, Tick Marks, Tick Labels, and Grid Lines

Tim Brock / Wednesday, March 11, 2015

General principles

While the fundamentals of chart design largely concern the accurate and efficient visual representation of data, it is important not to forget the supporting structures - axes, tick marks, tick labels, and grid lines. These should be subtle (to avoid distracting from the data) but distinct from the background (otherwise what's the point?).

Perhaps the most important things to realize is that gray/grey is your friend. When we have black axes, tick marks, and grid lines (top left) the chart is dominated by the strong dark lines and the data appears almost secondary. Using gray grid lines (top right) allows the data to stand out. We can take this further by muting the axes too (bottom left). The grid lines are optional and can be removed altogether if desired without any major loss in clarity (bottom right).

The above assumes a white background for the data region. If your background is light gray then use a slightly darker or lighter gray (or white) for any grid lines. If you've gone for a black background then use dark gray for grid lines instead.

For tick labels and title text I often use black - I think it makes the finer details of letters clearer and unambiguous - but I avoid bold. Also, avoid any typeface with even a hint of Comic Sans about it.

Positioning tick marks

It's easy to just accept the default number and locations of tick marks, their labels and the corresponding grid lines (if used) that a piece of software churns out for you. Sometimes this is okay. Sometimes a bit more thought can lead to a more refined look and enhanced reading experience.

There's no set rule about the number of tick marks that should be used on an axis. Your choice should depend on the range covered. Three is likely too few (left) while sixteen is too many (middle). Something in the range of five to ten (right) is fairly standard.

Ticks should be placed at (relatively) round numbers. That could mean integers, multiples of 50 or 100 or multiples of 0.1. Obviously this depends on the magnitude of the data.

Be wary of using unlabeled minor ticks and associated grid lines as they may mark positions of non-integers on a scale. For example, assume we have a chart that uses the right-hand axis above. The positions of integers on the vertical scale that are not divisible by five can be estimated by mentally splitting the gap between each tick in to fifths. If we add one "minor" tick between each pair of "major" ticks then they mark the positions of 2.5, 7.5, 12.5 and so on (left below). There are now some integers that are two fifths and four fifths of the way between a major and a minor tick (eg the positions of 1 and 2 between 0 and 2.5) and others that are one fifth and three fifths of the way between a minor and a major tick (eg the positions of 3 and 4 between 2.5 and 5). This is unhelpful when it comes to estimating the encoded values of data points. In this example the only sensible, consistent, position for minor ticks would be at every integer that doesn't already have a major tick (middle). That would mean 31 ticks in total. Even though most of the ticks are unlabelled this may seem excessive. So in this case you probably want to avoid minor ticks (right). In Show Me the Numbers, Stephen Few argues against minor ticks altogether because they "suggest a level of quantitative precision that graphs just aren't meant to provide".

Formatting tick labels

How many 0's are there in the number 100000000? The answer is 8. The default behavior on a least one version of a popular tool for creating charts is to print all 0's on tick labels below a billion without any thousands separator (as in the example on the left below). This makes it really easy to misread the magnitude of data by a factor of 10 in one direction or the other. Adding commas will reduce this problem greatly (middle) but makes the labels even longer. Issues like these can be easily avoided if you just rescale. If the data is measured in millions then say so on the axis title and remove six zeroes from the labels (right). If the data is measured in billions then say so on the axis titles and remove nine zeroes from the labels. And so on.