Components

Axes

Axes provide vital reference information for users to associate data points with values, especially when data points are not labeled directly in a chart.

Typically charts contain two axes: an x-axis and a y-axis. In many cases, one axis is used to establish the continuous interval of a dataset (i.e. time), while the other axis is used to map a data point against a value (i.e. a percentage, dollar amount, or integer).

Axes aren't always necessary in data visualizations, but should be considered for use by default. When using data labels, you can omit the axis being used for interval labels.

Titles

Axis titles provide helpful contextual information about the tick marks of a given axis, such as the unit of measurement. When axis titles are used in conjunction with titles and subtitles, users will be able to more easily understand what a visualization is about.

Examples

Acceptable Example

Why it’s Only Acceptable

The axis title missed an opportunity to include the unit of measurement for the tick marks in the y-axis. As a result, the tick marks include a percentage symbol after each labeled tick and the title isn’t that useful.

Preferred Example

Why it’s Better

Now that the title features the unit of measurement, the tick marks no longer need a percentage symbol. The title also makes it easier for users to understand what the visualization is about as a result.

Tick Marks

Tick marks are used to indicate a reference value at a given point in a chart. Tick marks function similar to the lines on a ruler – not all tick marks need to be labeled, but they do need to establish a continuous interval by ensuring the number of tick marks between each labeled tick mark is always the same.

When using tick marks, try not to label too many elements or use too many marks along an axis. If tick marks appear cluttered, users won’t be able to determine the value of various data points.

Examples

Acceptable Example

Why it’s Only Acceptable

Labeling every tick mark isn’t necessary and can often cause labels to clutter and overlap, especially in smaller visualizations or when viewed on smaller screen sizes.

Preferred Example

Why it’s Better

Using less labels results in more legible tick marks that are less cluttered. You can also use varying heights for labeled and unlabeled marks for a clearer hierarchy of elements.

Comparing Visualizations

When creating data visualizations that are designed to be compared, always use consistent axes. This allows users to accurately compare the data across each without having to consider the variances resulting from axes with different start and end values.

Examples

Failed Example

Bar Example
Bar Example 2
Why it Fails

In both examples, it appears that the "Col 1" values (left-most bars) are nearly identical. However, if you look closely at the tick marks on each y-axis, you'll see that the "Col 1" value in the second example is thirty percentage points less than it is in the first example.

A data visualization is designed to add visual dimension to data, but if the visualized elements give users false impressions of the data, than the data visualization isn’t useful. For these reasons, it is important that the y-axis be consistent across all data visualizations that are designed for comparison.

Preferred Example

Bar Example 3
Bar Example 4
Why it Meets the Requirements

Using the same data as the first set of examples, these preferred examples feature a consistent y-axis that make it easier to distinguish differences between each chart. The result produces a pair of data visualizations where the changes in values correspond to the changes in each visualization.

Guidance

Requirements

Always

Recommendations

Recommended