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
|Population by age
|Bar chart, population pyramid, box plot, dot plot
|Price inflation over time
|Line chart, calendar heat map
|Schools ranked by performance
|Bar chart, lollipop chart, slope chart
|Rail company performance compared with target
|Bar chart, dot plot
|Relationship between weight and height
|Scatterplot, line graph
|Average income by region
|Geographical clusters of notifiable diseases
|Total economic production by industrial sector
|Pie chart, donut chart, tree map, bubble chart
|Trade between countries
The Government Analysis Function gives best practice guidance on using different chart types for data visualisation.
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.
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).
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.
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.
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.
Feedback, help and support
There is a problem
Thanks for your feedback