Data visualisation: charts

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 Scottish Government 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.