Chart details Axes and gridlines

Overview

Axis scales and gridlines play an important role in helping the user understand and interpret the data in your chart. The right axis scale helps convey the relative size of your data values accurately and clearly to the user.

Axis start point

For charts that use a filled area or line starting from the axis to represent data values, the axis should always start at zero. This includes bar charts and area charts.

A bar chart's axis should never start above zero, as it does in the following example:

Always start a bar chart's axis at zero, as in the following example:

For charts where the data points are not connected to the axis, crop the axis if needed. This includes line charts and scatter plots. For example, if your data values range between 92 and 100, start your axis at 90, rather than 0, to show the data more clearly.

In the following example, the axis starts at zero. This makes it hard for users to see the trend in the data:

In the following example, with the same data, the axis starts above zero. This makes it easier for users to see the trend in the data:

However, it is often still best to start your axis at zero if you can do this and still show the trend clearly. For example, if your data range from 2.5 to 9.5, start the axis at 0, rather than 2.

When your axis does not start at zero, make sure there is a gap between the start of your axis and the first data point. This gap should be around one-quarter to one-third of the space of the chart.

Axis end point

Extend your axis to include all your data points. Where possible, extend to the next gridline after your data points, as this helps to provide context to your chart.

Do not do this if including the additional gridline would significantly reduce the size of the data points in your chart.

In the following example, the axis is extended to provide the gridline at 6%. This provides context for data values between 5% and 6%:

If your chart includes both positive and negative values, you should have at least one gridline below zero and one gridline above zero.

Extending your axis to provide context

You can also extend your axis beyond your data points to provide context that helps the user interpret the data.

For example, you could extend your axis to include a target associated with the data. This will help your user compare the data with the target value.

Always include an annotation to explain the relevant context.

Consistent axis scales

If you are making several charts that show comparable data, try to use the same axis scale for each chart. Different scales can be misleading. Consistent scales help users understand the relative size of values.

Non-linear scales

Linear scales are more intuitive and easier for users to understand than non-linear scales, such as log scales. Avoid log scales, and other non-linear scales, except where there is no other way to show your data clearly.

An exception is charts using odds-ratios to show relative risk. These should be plotted on a log base 2 scale.

Dual axis charts

Dual axis charts are charts with two different variables plotted on the same axis. Avoid using dual axis charts as they are often misleading and difficult to interpret.

Instead, use either two charts or one chart with a single axis and annotations to explain the trends.

Read more in our blog post Duelling with axis: the problems with dual axis charts (opens in a new tab) 

Axis orientation and direction

Time-series charts

Axes showing time, such as on a line chart or column chart, should be on the horizontal axis (the x-axis), running left to right.

There may be certain cases where you need to plot time on the vertical axis (the y-axis). In this case, the dates should run from oldest at the top to most recent at the bottom.

Category axes

Where a chart has one axis with discrete categories, such as a bar chart, this should be plotted on the vertical axis (y-axis).

Only plot categories on the horizontal axis (x-axis) if they are bands of a continuous variable in a chart showing distribution.

The categories on an axis should be ordered in a logical way, following the guidance on ordering in charts (opens in a new tab) 

Gridlines

Gridlines can help users quickly and effectively interpret charts by giving a reference point for the data values.

Most chart types should have gridlines on at least one axis. The main rules for using gridlines are as follows:

• all numeric axes, except for those showing time or bands of values, should have gridlines
• time axes should have tick marks, but not gridlines
• axes showing discrete categories should not have tick marks or gridlines

Whether a chart has horizontal gridlines or vertical gridlines, or both, will depend on the chart type.

Zero lines

The line at the zero point on your axis should have more emphasis than standard gridlines.

If your axis does not start at zero, it should not have any emphasis on the gridline at the start of the axis.

Where showing data indexed to 100, your axis should have a gridline at 100 with more emphasis than standard gridlines.

Number of gridlines

The exact number of gridlines will depend on your units and the size of your chart.

Gridlines should provide a quick, useful reference. Do not use too many gridlines, as this can make the chart cluttered. In most cases, use 6 to 10 gridlines for a standard desktop view.

Smaller charts, such as those for mobile displays, should have fewer gridlines. In most cases, use three to six gridlines for a mobile view.

In the following example chart, seven gridlines, including the zero line, are displayed on a standard desktop view and four are displayed on mobile view:

Gridline intervals

Gridlines should be at sensible, round-number, intervals. For example:

This makes them quicker to read and easier to interpret.

Gridlines should not be at non-round number intervals. For example:

Labelling gridlines

Gridlines should always be labelled with the value they represent.

We do not use gridlines without labels, known as minor gridlines, or extra tick marks between gridlines.

Minor gridlines create clutter and are not needed to interpret charts.

Read more about how to style and format gridlines in our chart elements guidance

Help improve this page

Let us know how we could improve this page, or share your user research findings. Discuss this page on GitHub (opens in a new tab)