Charts

  • All content in charts (such as axes, keys and other labels) must display horizontally and be easy to read.
  • Ensure axis labels are displayed in full and not cut off or abbreviated.
  • Write out abbreviations in full or clearly explain them in the footnotes.
  • Do not rely on colour alone to convey information: ensure there is a high enough colour contrast ratio between chart details and background colour.
  • If the axis includes dates, these must be consistently displayed for all charts in the release so that they are easy to follow.
  • The key must always display above the chart for easy reference.

An interactive HTML chart should always be used rather than an image of a chart. This ensures that all users are able to read it, including those with assistive technology such as screen readers. 

If charts cannot be produced in HTML, then SVG images are more accessible than other formats because they can be magnified.

When publishing graphs showing complex information, make sure that a clear text alternative is provided. For example, you could describe the trends in body text and have a table showing the most important data points.

You must also link to the raw data in a XLS or CSV file, or provide a way for users to request it.

Interactive charts will also adapt to the size of the screen being used to view the content, so they are more useful to users accessing the content on a mobile or tablet.

Chart titles should be descriptive and clearly explain what the data are showing.

Avoid using dual axis charts as they are often misleading and difficult to understand. Either use separated charts or a single axis chart which uses annotations to explain the trends.