Information

You appear to be using an unsupported browser, and it may not be able to display this site properly. You may wish to upgrade your browser.

Data visualisation: charts

How to use charts to present numerical data in an accessible way.

Choosing a chart

There are many different types of chart. Choosing which one to use will depend on the:

  • message conveyed
  • statistical relationships within the data
  • target audience

This table gives examples of different statistical relationships. It suggests the type of chart that would work best for each of these.

Recommended chart types by statistical relationship. Source: Government Analysis Function
Relationship Example Recommended chart types
Distribution Population by age Bar chart, population pyramid, box plot, dot plot
Time series Price inflation over time Line chart, calendar heat map
Ranking Schools ranked by performance Bar chart, lollipop chart, slope chart
Deviation Rail company performance compared with target Bar chart, dot plot
Correlation Relationship between weight and height Scatterplot, line graph
Magnitude Average income by region Bar chart
Spatial Geographical clusters of notifiable diseases Map
Part-to-whole Total economic production by industrial sector Pie chart, donut chart, tree map, bubble chart
Flow Trade between countries Sankey graph

The Government Analysis Function gives best practice guidance on using different chart types for data visualisation.

Accessibility

The Scottish Government is committed to making its websites accessible. The Digital Scotland Design System meets the Web Content Accessibility Guidelines version 2.1 (WCAG) A and AA success criteria. Any charts used with the Design System must meet these guidelines too.

The Government Analysis Function provides further information on creating accessible charts.

Colour

Do not use colour alone to convey information. Avoid using legends for line charts or pie charts. Instead, use text labels to identify lines or segments. Some visually impaired users may be unable to tell the difference between colours.

Use colour carefully and be consistent. Use colours that are logical for the context. For example, on a chart plotting fruits, avoid using the colour orange to represent apples.

Colours can have particular associations or meanings for the user that could make the chart unclear. For example, red often means warning.

To meet accessibility guidelines, adjacent colours in charts must have a contrast ratio of 3 to 1. Only use a different ratio if it helps make the content easier to understand. Any text on a chart must have a contrast ratio of 4.5 to 1 with the background colour, unless the text is larger than size 18 (or size 14 with bold weighting).

Publishing charts

Charts within an article should match the column width of the surrounding text.

Using HTML or an image

You should use HTML for charts if it meets accessibility guidelines.

Interactive charts often use JavaScript to add functionality. The software that creates these charts might not support accessibility. You should check that generated charts meet accessibility guidelines.

If your only option is to publish a chart as an image, then use the Scalable Vector Graphic (SVG) file format. You should use the SVG format over bitmap file types like PNG and JPEG. The SVG format has the advantage of being able to scale to different sizes without losing clarity. This makes it more suitable for use on different devices.

Chart text

Give each chart a title that describes the main message it presents. Use an HTML heading element at the right heading level for the surrounding content hierarchy.

Include text labels and annotations as part of the image – they’re essential parts of a chart and will therefore still meet accessibility guidelines. Use the largest font size you can as text may appear smaller on different devices.

Give alternative content

Not all users will be able to read or understand a chart. Give alternative versions of the data and explain the meaning of the chart. This will help make it accessible.

For simple image charts, use alternative text to describe what the image depicts. This will help users of screen readers understand the chart.

Complex charts may need more information. Some users might not understand a chart by its name only or through a brief description. You should supplement the chart with:

  • an HTML table of the data (large HTML tables can be difficult to navigate)
  • a more detailed text description that explains the chart’s key messages
  • both of the above, if appropriate

For complex charts with large data sets, give the data in a downloadable format like an Excel spreadsheet.

If providing separate downloadable image versions of a chart, include the title as part of this image. This will ensure the title is not lost when the chart is downloaded, shared, or edited.

Programmatically generated charts

If you’re using R to produce charts then it may be helpful to use the 'sgplot' R package. This package, from the Scottish Government, follows best practice guidance to help make your charts accessible.

Back to top