This guidance is for people in government who need to design charts.
It does not cover interactive visualisations. However, the approaches discussed are applicable to them.
To help you implement this guidance, we have provided data visualisation e-learning and a charts checklist.
Accessibility legislation came into force in September 2020. This means all content published on public sector websites must meet the level A and AA success criterion in the Web Content Accessibility Guidelines 2.1.
This includes charts.
Consequences for inaccessible content
Content on public sector websites that does not meet the Web Content Accessibility Guidelines 2.1 can get complaints related to the Public Sector Bodies (Websites and Mobile Applications) Accessibility Regulations 2018 and/or the Equality Act 2010. This could cause reputational damage and loss of public trust.
Make sure whoever is responsible for the content you publish is aware of this and the possible risks involved.
Many of the success criterion relevant to publishing charts are related to colour contrast. These are outlined in our colours guidance.
The other relevant success criterion for charts are:
This is criterion 1.1.1 (A level).
“All non-text content that is presented to the user has a text alternative that serves the equivalent purpose.”
This means all data visualisations need a text alternative that “serves the equivalent purpose”.
You need this even if the chart colours meet the contrast requirements set out in other success criterion.
The text alternative can be a written description or given as a table in an accessible format.
More detail on alternative text is available in our ‘Making analytical publications accessible’ guidance.
Images of text
This is criterion 1.4.5 (AA level).
“If the technologies being used can achieve the visual presentation, text is used to convey information rather than images of text except for the following:
- Customizable – the image of text can be visually customized to the user’s requirements
- Essential – a particular presentation of text is essential to the information being conveyed.”
This is applicable when using images of charts rather than building charts into the HTML code of the page.
It means all text related to the chart should be in the body text of the webpage unless it is essential for it to be in the image of the chart.
For example, titles and footnotes should be in the body text but annotations can go within the image.
Basics: choosing the right chart
What is the message?
Think about the message your chart is aiming to get across. A good way of thinking about this is to imagine you are describing what the chart is showing over the phone – what would you say?
If you cannot write down the message your chart is giving in a few sentences, you should think again about the chart you have chosen.
Ask yourself: Can I simplify this? Can I break it down in another way? Am I trying to communicate too many messages within one chart?
After you have decided on the message, consider the statistical relationship you’re trying to show.
The right chart will be depend on the values in your data and the statistical story you’re telling. Try out different options and test your ideas (see the Testing section of this guidance).
The Visual Vocabulary tool from the Financial Times can help you choose the best chart
Table matching chart types to statistical relationships
|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 - figure 7 in this release|
|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|
Basics: publishing charts
HTML or image?
If the website you publish on has the functionality to build charts within the HTML code which meets the accessibility standards, use this functionality.
For example, if you publish on GOV.UK you can create horizontal bar charts in HTML.
Examples of bar charts you can create on GOV.UK.
If you work for the Office for National Statistics or publish on the Explore Education Statistics website, your options for HTML charts are much wider.
If you cannot publish charts in HTML you will have to upload your chart as an image.
Scalable Vector Graphic (SVG) format
It is best practice to use the Scalable Vector Graphic (SVG) format when publishing images of charts. Unlike bitmap file types such as JPG or PNG, SVGs retain the same quality no matter what screen resolution or size they are viewed at. This means a user can zoom in and out and the image retains its quality. This adaptability makes it a more accessible format.
Changing a PNG or JPEG file into an SVG does not make it scalable, it must be done from the source file.
It is possible to save images of charts made in Microsoft programs, R and Python in the SVG format. More information is in our ‘Making analytical publications accessible’ guidance.
A chart should follow the natural flow of content. It should not be much wider or narrower than the text around it.
Basics: what to supply with charts
All charts need at least one title, but it is considered best practice to give them two. These should be: a headline title and a formal statistical subtitle.
The headline title should communicate the headline message of the chart. For example ‘Increase in number of people living alone’.
The statistical subtitle should say what the data is, the geography the data relates to and the time period shown. For example, ‘Figure 1: Number of people living in one person households, England, 1991 to 2021’.
We advise that one of the titles should have ‘Figure n’ at the start to denote which figure it is in the report. This helps navigation and it can help screen reader users understand there is a figure coming up in the next part of the publication.
Both titles should be tagged correctly to meet the accessibility legislation. For example, first level subheadings should have a Headings 2 tag, second level subheadings should have a Headings 3 tag and so on.
Placement of the title
To meet accessibility success criterion 1.4.5 titles should be in the body of the page or document, as opposed to within the image.
This is because images of text are difficult to read for some people and should only be used when essential.
This does mean the image of the chart can be taken out of context if it is copied and pasted elsewhere. But, while putting the title within the image may make it harder to take a chart out of context, it does not stop it completely as titles can be cropped out. Therefore, we prioritise accessibility and advise for the title and subtitle to be in the body text.
Alternative text is often thought of as the text that sits in the code behind an image, but really it refers to any text that describes non-text content. It is needed so that people with visual or certain cognitive impairments can understand the content communicated by images.
To meet accessibility success criterion 1.1.1 all non-text content should have alternative text that “serves the equivalent purpose”.
For charts this can be given by:
- a table of the data presented in the chart
- a text description of the message the chart is presenting
Which you choose should depend on what you would expect a non-disabled user to get from the chart. If you expect a non-disabled user to read the data from the chart, give a table. If you expect them to take away an overall understanding of the data, give a text description of what you want them to understand. If you expect them to do both, give both.
The text description should describe what you want users to understand from the chart. It should not repeat the chart title, be a literal description or outline every data point shown. Imagine you are describing what the chart is showing to someone who cannot see it.
Placement of text description
If you use a text description, our advice is that this should live in the body of the page, directly underneath the chart. In this situation the image of the chart should be marked as decorative and therefore hidden from screen reader software. This is usually done by leaving the ‘alt attribute’ blank but sometimes there will be a box to tick.
Depending on the length of your publication and how your commentary is written it can be a good idea to place the text description under a subheading. This subheading should be marked up correctly (given the structure of the page you are publishing on). It should also be specific to the figure, for example “Description of figure 1”.
If you find the subheadings break up the text too much you can start the text under the chart with “Description of figure 1: . . . ” instead.
Example: in this publication from Welsh Government each chart is followed by a text description that starts with “Description of figure n . . . “
Images that are links
Note: if your chart image links to a larger version of the chart, the image should not be marked as decorative. It should state what happens when someone clicks the link. For example “Larger version of Figure 1”.
More information on alternative text
More information on alternative text, including the reasoning behind this guidance, can be found in our ‘Making analytical publications accessible’ guidance.
You should give the specific data source for each chart and link directly to it if you can. Avoid stating things like ‘Office for National Statistics’ and then linking to the website homepage. You should help users find the data.
As with titles, this text should be in the body text of the page and not part of the chart image.
It is best practice to provide source information in the following format: [publication, survey or other source of data] from the [organisation]
For example: Source: Childcare and early years survey of parents from the Department for Education.
Please note this is recently updated guidance (the older guidance said to use a dash instead of “from the”), so source information may look different across the website until this approach becomes embedded.
It is best practice to provide the data displayed in each chart as an accessible data download. Providing data downloads improves the transparency of our data visualisations and allows people to accurately recreate our charts for their own needs.
Providing an accessible data download is a necessity if it is going to act as the alternative text for your chart. More information on alternative text can be found in our ‘Making analytical publications accessible’ guidance.
You should link to a data download underneath each chart. The file type and size should be included in the link.
The text used in the link to the data download should be specific and should not be identical to other links on the same webpage. Using multiple identical links that lead to different places on the same webpage can be very confusing for screen reader users.
For example avoid repeatedly using ‘Download the data’. Either state the title of the chart, or the figure number. For example: ‘Download the data for number of people living in single person households’ or ‘Download the data for figure 1’.
More information on providing data downloads is in our ‘Making analytical publications accessible’ guidance.
Sometimes, charts come with footnotes. Presentation of these is not consistent across government. Some statistics producers put footnotes under each chart. Others present charts without any footnotes.
Having lots of footnotes can make publications very long. This causes issues with navigation online as it means lots of scrolling is needed. These problems are worse for users who access content through a mobile device and for those who may have difficulty scrolling due to conditions like arthritis.
But, footnotes do play an important role in making sure data is not misused.
Advice for chart footnotes:
- put them in the body text of a page
- limit them to only important information
- be concise
- avoid repetition of survey names
- only refer to the data used in the chart or table.
- do not use superscript text or symbols (see our guidance on using symbols and shorthand)
Basics: formatting charts
Keep it simple
- shaded backgrounds
- unnecessary borders
- boxes around legends and other content
- patterns, textures and shadows
- 3D shapes
- unnecessary data markers on line charts
- thick or dark gridlines
Example: a busy chart versus a simple one
The example shows two charts next to each other. One shows a ‘busy’ chart with a grey background, dark gridlines and unnecessary data markers and text box borders. The other is a ‘simple’ chart without any of the unnecessary formatting. We advise to keep charts as simple as possible.
All axes, series, segments and bars used in charts should be clearly labelled so it is clear what the graph is showing.
In terms of accessibility, chart labels can be considered images of text that are essential. This means placing them within the image of a chart does not fail the legislation.
Tips for chart labels
1. Right align values on y-axis
When numerical values are right aligned they are easier to read as all the figures are aligned to the right place -units over units, tens over tens, hundreds over hundreds and so on.
For example, here is a list of left aligned numbers:
The units, tens, hundred and thousands do not line up, this makes comparing the figures more difficult.
2. Use commas to separate thousands
When you have large numbers on an axis, use commas to separate thousands. This makes numbers easier to read. For example 121,576 is easier to read than 121576.
3. Consider font size and type
If creating an image of your chart, use a large enough font for all labels. Unfortunately, as images often get resized when published it is not possible to suggest a specific minimum font size. This is something you must decide when looking at each chart image.
Make sure to use a sans serif font as some people find serif fonts hard to read.
4. Consider colours
Consider the colours used for your labels. See the section on ‘Colours for axes and labels’ in our colours guidance.
5. Text should always be horizontal
When labelling axes, always use horizontal text as vertical or diagonal text is hard to read. This applies to category names on bar charts and y-axis labels on line charts. If it is difficult to fit the labels into the space, try transposing the chart or changing the units.
Example: transposing a chart to make labels easier to read
The example shows two charts next to each other. One shows a bar chart with vertical bars. The bar labels are written at an angle along the horizontal axis. The other shows a bar chart with horizontal bars. The bar labels are written horizontally. Horizontal text is easier to read.
Use annotations if they will help to tell the story.
As with chart labels, annotations can be considered essential images of text so having them within an image does not fail accessibility legislation.
But, when writing the chart’s alternative text you should incorporate any messages given by annotation.
Tips for annotations
- Use annotations to highlight key features, provide context and aid interpretation
- Make them concise
- Place them as close as possible to the data points of interest
- Do not overuse them as this is likely to overwhelm users and reduce their effectiveness
- Use a black or dark grey, sans serif font
Example: This chart showing the number of live births from 1901 to 2018 from the Office for National Statistics (ONS).
Example: This article from ONS on the history of strikes shows an interesting way of displaying annotations when there are too many to fit on the chart.
Tick marks are the small marks that appear at regular intervals on an axis. They indicate the scale or level of detail of the data.
Tips for tick marks
- When an axis shows continuous data (such as an axis showing years on a line chart) you should centrally align labels over tick marks.
- Tick marks should show the regularity of the data but you do not need to label all of them if there is not enough space (remember, you should only use horizontal text).
- If there is space to do so you should always label the final tick.
- When an axis shows categorical data, you do not necessarily need tick marks, but if you do use them labels should be aligned between them.
Example: how we advise to use tick marks
The image shows three axes with different ways of using tick marks. The first axis is a continuous axis of years. Each year has a label and the tick mark sits centrally over this label. The second is a categorical axis where the category labels sit in between two tick marks. The third is a continuous axis of months with every other tick mark labelled.
Gridlines are the lines that sit in the background of a chart. They can help people read data points from a chart by linking the chart elements to axis labels.
Tips for gridlines
- Use the right amount of gridlines – generally, we advise a maximum of ten.
- Too many makes the chart too cluttered.
- Too few means they are not useful.
- Use a light grey for gridlines – see the section on axes and labels in our colours guidance.
Example: how we advise to use gridlines
The image shows two versions of the same chart. One has 15 gridlines in a dark grey colour, the other has 8 gridlines in a light grey colour. The chart with fewer, lighter gridlines is easier to interpret.
Communicating quality and uncertainty in charts
Guidance from the Data Quality Hub on ‘Communicating quality, uncertainty and change‘ has a useful section on formatting charts to communicate quality and uncertainty in data visualisations. However, please bear in mind, this guidance has not yet been updated to incorporate the accessibility legislation. We plan to do this soon.
Basics: example chart
This example shows how to implement the guidance in the three ‘Basics’ sections.
Can I have some more? Oliver stays on top of baby names list
Figure 1: Number of baby boys given the top 10 most popular names, England, 2020
Description of figure 1
This bar chart shows Oliver is the most popular name given to baby boys in England in 2020. A total of 4,017 boys were named Oliver, followed closely by George, Arthur, Noah, and Muhammad which were all given to over 3,500 babies. The next most popular were Leo, Oscar, and Harry (all given to over 3,000). Archie and Henry completed the top 10 (both given to over 2,500).
Source: Baby names for boys in England and Wales, 2020 edition from the Office for National Statistics
Download the data for Figure 1 (ODS, 4.6KB).
- Ranking uses exact spellings. Similar names with different spellings are counted separately.
Summary of this example
This example has:
- a headline title giving the message of the chart in a headline style
- a statistical title with a figure number and information on the data, geography and time period
- an SVG image of the chart which is hidden from screen reader software
- alternative text in the body of the page directly underneath the chart
- a specific source with a link to where you can find the data
- an accessible data download
- uses a simple, uncluttered background
- has bars in a colour that meets the contrast requirements with the white background
- uses light coloured gridlines
- has a gap between the bars which is slightly narrower than a single bar (more on this in the bar charts section)
- has comma separators in the x-axis numerical labels
- uses only horizontal text
Using bar charts
Bar charts are versatile. They work well when comparing the size of different categories.
Bars can be used with time series data, as long as the data points are at equal intervals.
However, when you have more than one time series on a chart, do not use a bar chart, use a line chart instead.
Example: use a line chart instead of a bar chart when you have more than one time series
The example shows two chart next to one another. One is a clustered bar chart showing two time series as bars. The other is a line chart of the two time series. When you have more than one time series on a chart, lines display the data better than bars.
Part-to-whole relationships can be shown with pie charts and bar charts.
When two or more categories are fairly equal it is hard to see small differences on a pie chart so it is better to use a bar chart.
We also advise to limit the categories on a pie chart to a maximum of five. This means bar charts are useful if you have more than five categories to show in a part-to-whole relationship.
If you want to compare multiple part-to-whole relationships in one chart you can use a stacked bar chart.
Example: when differences between categories are small, a bar chart is better than a pie chart
The example shows a pie chart and a bar chart displaying the same data. The bar chart shows the small differences between the categories more clearly than the pie chart.
Note: more information on using pie charts is in the pie charts section of this guidance.
Use bar charts to show data ranked in ascending or descending order.
Always rank bars by value, unless there is a natural order, for example, age or time.
Example: Figure 1 in this release on language in England and Wales (link opens in new tab) ranks bars by value
Use bar charts to show how data differs from a fixed value. For example, you might want show how data from different categories compares with an average. Or you might want to show percentage change for different groups.
Example: Figure 7 in this publication on employee earnings from ONS (link opens in a new tab) compares growth in earnings for different occupations
Use narrow bars with small gaps to show how data is distributed across a range. A common example is a population pyramid.
Example: these population pyramids from ONS (link opens in a new tab)
Formatting bar charts
When there is a important point on a scale, such as a policy target or a relevant average, you should always include it.
Example: Figure 5 in section 4 of this ONS release on the UK’s digital divide (link opens in new tab).
Long category names
Use horizontal bar charts when you have lots of categories or long category names that do not fit under vertical bars. See the example in the sub-section on labels in the ‘Basics: formatting charts’ section.
See our colours guidance for advice on using colour in bar charts.
Gaps between bars
The gap between bars should be narrower than the width of a single bar. This makes it easier to compare the categories.
Example: gaps between bars should be narrower than the width of a single bar
The example shows two bar charts displaying the same data. They illustrate that making the gaps between bars narrower than the width of a single bar makes the bars easier to compare.
Best practice for using value labels on bars is complicated. This is because of issues related to the placement of the labels.
Putting labels on the bars can cause issues with text contrast. Also, when bars are very short, labels have to live outside the bar which means figures will not be aligned and therefore, harder to compare.
The alternative is to put labels at the end of the bars. But this also causes issues with alignment, again making it difficult for users to compare values.
However, a recent Twitter poll by the Head of ONS Data Visualisation suggests users like value labels and actually prefer them to be on the end of the bars.
Another approach is to create a chart-table combination. But it is not easy to create a good quality image of a chart-table combination with basic software. This means the text in chart-table combinations may be blurry and difficult to read.
Generally, if you want to use value labels on bars we advise you to test your approach.
And, if in doubt, remember that a well structured table can often be as powerful as a chart.
Do not break the numerical axis on bar charts
The numerical axis on a bar chart should always start at zero. Even if the axis is clearly labelled with a break signalled with a gap, the relative size is still displayed very strongly on a bar chart and can mislead users.
If starting the numerical axis at zero stops you from telling the story clearly, consider an alternative chart, such as a Cleveland dot plot.
This blog post from the ONS Digital team gives a good summary of this issue. This Twitter discussion also demonstrates the issue well, as does this tweet from the Office for Statistics Regulation:
We have written to @hmtreasury about a graph giving a misleading impression of the scale of deceleration in inflation.https://t.co/1OiOZx12eM
It is important that data visualisations follow Government guidance to avoid undermining public confidence in the outputs of departments. pic.twitter.com/VLary1XHuu
— Office for Statistics Regulation (@StatsRegulation) February 27, 2023
Description of tweet image: A bar chart published by HM Treasury showing inflation statistics where the y-axis starts at 8%. The rates fall from 11.1% in October 2022 to 10.1% in January 2023 but the y-axis starting at 8% exaggerates the drop.
Stacked bar charts
Using stacked bar charts
Stacked bar charts are particularly useful when you want to compare multiple part-to-whole relationships in one chart.
This is because with part-to-whole data, all the bars will be the same length. This makes it easier to compare the size of the categories within the bars.
Example: this publication on coronavirus and vaccination rates by occupation (opens in new tab) has several examples of stacked bar charts showing multiple part-to-whole relationships.
Stacked bar charts can be used to present data which is not part-to-whole. But, care should be taken as it is easy for them to become cluttered and hard to read.
Examples of stacked bars used well for data that is not part-to-whole
Example 1: Figure 3.1 in this publication on UK trade (opens in new tab).
Example 2: This chart showing data on COVID-19 infections in school pupils.
Limit to four categories within the stack
Aim for a maximum of four categories within each stack. If you have more than four the chart can get too cluttered.
Example: This article has some good examples of bad charts, including a very colourful stacked bar chart.
Try combining some of the categories or using a different type of chart.
Example: combining categories in a stacked bar chart
Figure 1: stacked bar chart with eight categories of food
Figure 2: stacked bar chart with three categories of food
The legend is presented in the same order as the categories within each bar.
This example shows two stacked bar charts. One has eight categories and the other has combined these to make three broader categories. We advise combining categories when appropriate as stacked bar charts with more than four categories in each stack can become difficult to read.
Likert scale stacked bars
Sometimes, when presenting responses linked to a Likert scale you may have more than four categories. In this case, we would still suggest you try to aggregate your responses to make your message clearer. Read this guidance on aggregated stacked bars.
If you cannot aggregate your data you should take care with adjacent colours. Use our colours guidance as a starting point and see the tips on choosing your own palette if you need more colours.
First and last categories within the stack
Remember: the first and last categories in the stack will be easier to compare than the ones in the middle. Think carefully about what you are trying to communicate.
Consider ordering the categories within the stack from most to least important. Then rank the bars by the most important category. This can help you get a message across more clearly. However you cannot do it when the bars have a fixed order, for example age ranges or years.
Example: ranking bars by most important category in the stack
The legend is presented in the same order as the categories within each bar.
This example is a stacked bar chart showing the percentage of people in each English region who have no pension, a Type 1 pension, a Type 2 pension or another type of pension not specified.
The data is fictional but it shows the categories in the stacks have been ordered so the no pension category is shown first. The bars have then been ranked so the regions are listed from the region with the highest percentage of people with no pension to the lowest. This presentation draws attention to the percentage of people in each region of England who have no pension
If you use stacked bars for data that isn’t part-to-whole, avoid using them for data where some categories have negative values. Try a small multiples chart instead.
When negative values are used in a stacked bar chart:
- it can be difficult to read
- it may be impossible to maintain enough colour contrast between the adjacent categories as the order they are presented is likely to change
- the legend labels do not always stay in the same order as the categories in the chart – making it harder to match legend labels to categories
Example: stacked bars with negative values versus small multiples
Figure 1: Stacked bar chart with negative values
Figure 2: Three small bar charts
This example shows two ways of showing growth rates. First in a stacked bar chart and then in three small bar charts, each showing an individual category – these are called small multiples. It is easier to work out what is happening in each category when small multiples are used. Also, small multiples do not rely on colour contrast to tell the categories apart and users are not reliant on using colour to match labels to categories.
But, it can be time consuming and difficult to make small multiple charts when using Microsoft Office programs. If you know of a better way to make small multiples please get in touch to share your expertise, email Analysis.Function@ons.gov.uk.
Formatting stacked bar charts
See our colours guidance for advice on using colour in stacked bar charts.
If possible, you should try to label stacks directly instead of using a legend. This is more accessible as you are not relying on a user matching the label to the data using colour alone.
If it is not possible or if it would make your chart very cluttered you will need to use a legend. Make sure the order and orientation of the legend matches the order and orientation of the data in the chart. State this above the chart so people who may have difficulties using colour to match labels to data can use this information instead.
Example: matching the order and orientation of the legend to the bar
The legend for the second chart is presented in the same order as the data within the bars.
The example shows two stacked bar charts showing the same data. One has a legend which matches the order and orientation of the categories in the bars, the other does not. It is more difficult to match labels to data when the order and/or orientation is different.
Legends and accessibility
In general, we should not rely on colour as the only way to match labels to data. If you have to use legends, see our colours guidance for more information on how to make stacked bar charts with legends as accessible as possible.
Stacked bar chart example
Example 2 in our guidance showing data visualisation examples demonstrates how to rethink value labels on a stacked bar chart. It also shows alternative ways to communicate the same message.
Clustered bar charts
Using clustered bar charts
Use a clustered bar chart when you want to compare categories within and across different groups.
Example: comparing male and female workers within and across different age groups in figure 1 of this publication about older workers in the pandemic.
Limit to four bars per cluster
Best practice for data visualisation is considered to be two bars per cluster. But, we know there may be times where it is appropriate to have more. In general, we advise a limit of four bars per cluster.
Having more than four categories can make the chart cluttered. If you have more than four categories, try combining the categories or using a different type of chart.
Avoid clustered bar charts for time series data
Line charts are better for displaying time series data when there is more than one series. See the example in the bar charts section.
Formatting clustered bar charts
See our colours guidance for advice on using colour in clustered bar charts.
Gaps between bars and clusters
In clustered bar charts the gap between the clusters should be wider than a single bar. If you’re presenting discrete data in clustered bar charts, it is best practice to leave a small gap between the bars in each cluster to increase contrast and help users work out the meaning of the colours.
Examples: see the clustered bar chart examples in our colours guidance
When using clustered bar charts you will often need to use a legend. As with stacked bar charts, make sure the order and orientation of the legend matches the order and orientation of the data in the chart. This should be stated above the chart so people who may have difficulties matching labels to data with colour can use this information instead.
With horizontal bar charts an alternative option is to label the first cluster directly so you do not need to rely on a legend at all.
See our colours guidance for more information.
Using line charts
Line charts are mainly used for time series data.
Formatting line charts
Colours for line charts
See our colours guidance for advice on using colour in line charts.
It is not possible to give a definitive thickness measure for lines on line charts, but remember to make sure they are not too thin. Very thin lines are hard to see.
Avoiding using legends unless necessary. This is because legends use colour to match labels to data. This fails accessibility success criterion 1.4.1.
In line charts legends can be avoided by labelling the lines directly. If you cannot place the label on the chart area, put it at the end of the line on the right hand side of the chart.
Use black or dark grey text for labels. Only use coloured text when the lines are so close together it is not possible to easily see how the labels assign to lines. This is because, in general, the contrast of black or dark grey text against a white background is easier to see than text in a different colour.
Example: labelling the lines on a line chart
The example shows a line chart with four lines. Each line is labelled with black text placed at the end of the line. This is better than using a legend which relies on users matching labels to lines using colour. It is also better than using coloured text.
Data markers a small shapes on lines that depict the data points in the series.
It is OK to use data markers but we advise caution. Large data markers or the overuse of them can make a chart cluttered. This is especially true when there are several lines on a chart.
Remember a chart is there to tell a story not to provide high levels of detail and precision.
Textured lines are dotted or dashed lines. They are sometimes used to differentiate lines.
We advise caution when using textured lines. They can make a chart cluttered.
They may be misinterpreted as showing incomplete, forecasted or provisional data, a target or a subcategory
Considerations for line charts
Consider the quality of your data before creating a line chart. Avoid focusing too closely on a volatile series.
Aim for a maximum for four lines
Presenting more than four lines on a line chart can be done, but it often results in the chart becoming too cluttered.
Example: a cluttered line chart with eight different coloured lines
The example shows a fairly cluttered line chart with eight different coloured lines. Each one represents a country in Europe.
Alternative example: small multiples
Small multiple charts may also be called ‘panel charts’ or ‘lattice plots’. These allow a user to see all the lines individually in a set of small charts. If you use these, it is essential for all the y-axes to have the same scale to avoid misunderstandings. To reduce clutter you can label the y-axis once in each row of small multiple charts.
The drawback of small multiples is that they are hard to create and the text on them can be very small and sometimes difficult to read.
Example: small multiple charts, one chart for each country
This example shows all the lines in the previous chart shown on individual, smaller axes. This allows easier comparison between the lines.
Alternative example: focus chart
When using focus charts you give a colour to the line showing the series of interest, but use a light grey for all other lines. This allows a user to focus on the series of interest and have some understanding of how it compares with the other lines. It does not allow the user to see much about the other series individually.
Focus charts should be used when the story you want to tell is about one series and how it compares to a group.
Example: focus chart with the UK line as the focus
The example shows a line chart where most of the lines are a light grey. The line showing the UK’s time series is in dark blue and stands out from the rest.
See more information about the colour palette we recommend for focus charts in our colours guidance.
Alternative example: slope chart
You can use a slope chart to highlight changes between selected points in time. Slope charts do not show as much detail as the other options, but trends are easily noticed. Think about the story you want to tell.
Example: slope chart showing where each country ranked at the start and end of the time period
This example shows a slope chart. This slope chart is made up of two lists of European countries, connected by lines which shows how their ranking has changed over two time points.
Breaking the y-axis
It is acceptable, with clear labelling, to break the y-axis on a line chart. As line charts are not read in the same way as bar charts, breaking the axis does not mislead in the same way.
When formatting a chart with a broken y-axis you should:
- make the break in the y-axis clear using a broken axis symbol
- make the x-axis line the same colour and thickness as the gridlines
- make the y-axis and the axis break symbol thicker and darker than the gridlines and x-axis
When there is an important point on a scale, such as a policy target, you should always include it.
Example: breaking the y-axis and adding context on a line chart
Original chart: Percentage of people immunised against diphtheria and Measles Mumps and Rubella (MMR), England, 1991 to 2014
This chart has a y-axis that runs from zero to 100%. It shows the rates of immunisation against diphtheria and MMR from 1991 to 2013 but the full story is not clear.
Improved chart: Percentage of people immunised against diphtheria and Measles Mumps and Rubella (MMR) compared with the World Health Organisation (WHO) target, England, 1991 to 2014
This example shows a break in the y-axis to zoom in on the important part of the chart. It also shows the addition of context by a line showing the WHO target for immunisation levels (95%) and it has contextual annotation about an influential report.
The break in the y-axis draws attention to the fact that rates of immunisation against diphtheria and MMR fell following the publication of a now fully retracted article by Wakefield AJ et al in The Lancet in 1998 that linked the MMR vaccination to autism. Rates increased a few years later as the report was at first partially retracted in 2004 and then fully retracted in 2010. In 2013 immunistaion rates were higher than they were before 1998. But the annotation also shows that they are still below the WHO target.
View the data in an accessible format (ODS, 4.7KB).
Breaking the y-axis in practice
In practice breaking the y-axis can be quite a clunky process. Our example has been made by pasting the chart into PowerPoint, adding two lines on the y-axis to make a broken vertical line and then inserting two more lines to make the break more obvious. However, it is also possible to do this using R.
If you know of a better way to do this, please let us know by emailing Analysis.Function@ons.gov.uk.
Dual axis line charts
Dual axis line charts can be used to present two variables with differing scales.
In general, we do not recommend using dual axis charts because:
- they can be easily misinterpreted
- the way we display lines in relation to each other can manipulate the data story, even if it is not intentional
It is best practice to separate the datasets and present them with their own y-axis. Using clear annotations can also help users understand your data and prevent misinterpretation.
The ONS digital blog post on “Dueling with axis: the problems with dual axis charts” provides more information on how dual axis can mislead users.
Employment and unemployment rate for people aged 16 to 64, UK, seasonally adjusted
This is a dual axis chart showing the employment rate using the y-axis on the left hand size and the unemployment rate using the y-axis on the right hand side. The employment rate is generally rising from around 72% in 2009 to around 76% in 2022. The unemployment rate is generally falling, from around 7% in 2009 to around 4% in 2022.
Source: Summary of labour market statistics from the Office for National Statistics
Charts like this can be easily misinterpreted. Possible messages a user might get from this chart are:
- The unemployment rate exceeded the employment rate between 2009 and 2015.
- The employment rate is now about twice as high as the unemployment rate.
Dual axis line charts can be manipulated to show almost any relationship.
Example of how dual axis charts may be manipulated
This example has six dual axis line charts. It starts with a faithful representation of the data – fairly flat lines spaced far apart. It then displays the other ways these lines could be shown. These are: lines crossing over, lines converging and diverging, lines separate and then converging, one stable line with lots of change in the other.
Dual axis line chart – alternative
Employment and unemployment rate for people aged 16 to 64, UK, seasonally adjusted (using two separate charts)
This figure shows the same data as figure 15 but now we have used two smaller charts to show the employment and unemployment rates on separate axes. We have also added in annotation explaining that at the start of the coronavirus (COVID-19) pandemic employment rates fell and unemployment rates rose.
Source: Summary of labour market statistics from the Office for National Statistics
Note that we have made it clear that the y-axis does not start at zero for the employment rate chart.
This presentation is less likely to be misinterpreted or manipulated. It draws attention to the changes in the rates.
Breaks in time series
Breaks in time series can occur due to missing data points and changes in methods.
The best way to deal with discontinuity varies depending on the data and the story you are telling. But, it must always be highlighted.
You do not always have to use a line for a time series with a discontinuity. Displaying the data as individual points may be better.
If you do use a line, do not join the points either side of the missing data point, even if the line is dotted or dashed. Joining points implies we know something about the data.
Example of time series with a break (fictional data)
This figure shows two line charts. Both have a discontinuity. One leaves a gap in the line and marks out the gap with two vertical dashed lines and annotation stating the data was not collected in 2020 due to the coronavirus (COVID-19) pandemic. This has a green tick above it. The other shows joins the gap with a dashed line. This has a red cross above it.
Examples of breaks in time series
- Figures 1 and 2 in the Coronavirus (COVID-19) Infection Survey, antibody data UK: 1 December 2022 (link opens in a new tab).
- Main stories section of ‘Fraud and error in the benefit system Financial Year Ending (FYE) 2022’ (link opens in a new tab) report.
The aspect ratio of your chart is the ratio of the chart width to the chart height. In line charts, the aspect ratio you choose alters the slope of the lines. This can be misleading.
We are not able to give a specific aspect ratio that will work for all line charts. But, this article on chart aspect ratios proposes you choose one that makes your line chart “appear reasonably neutral, without either making the changes appear too extreme (by picking an aspect ratio that is too small) or too flat (with an aspect ratio that is too high)”
Example: how different aspect ratios affect line charts
This example shows the same line chart with three different aspect ratios. Chart 1 has a neutral ratio, this is the best way to present the data. Chart 2 has a high aspect ratio which makes the data look too flat. Chart 3 has a low aspect ratio which makes the data look too extreme.
Line chart example
Example 1 in our guidance showing data visualisation examples demonstrates how to apply this guidance to a real-life line chart.
Using pie charts
Pie charts can be useful when showing part-to-whole relationships. This is because these charts clearly show that the ‘parts’ add up to the ‘whole’.
However, you should be aware that pie charts are not the best in terms of accessibility as they are hard to understand when magnified.
Pie charts should only be used when:
- there are five categories or fewer
- the categories sum to a meaningful whole (you can combine categories when appropriate, but never remove a category from the ‘whole’)
- there is a dominant category (if several categories are a similar size, use a bar chart instead)
Formatting pie charts
When pie charts present two variables we recommend using the dark blue and orange colours from our palette. Put a white border around each segment to enhance the contrast. For more information on using colours in pie charts with more than two variable, see our colours guidance.
Order of categories
Rank the categories in a pie chart by size and start the first segment at the 12 o’clock position.
Do not use a key, label the categories themselves. This avoids users having to use colour to match the label to the data.
Value labels can be useful on a pie chart (as long as the pie is limited to four categories or fewer)
Responses to the “What is your religion?” question on the 2011 Census of England and Wales
The example shows how to implement the advice given in this section. It also shows the following data: 59.3% of responses to the “What is your religion?” question on the 2011 were classed as Christian, 25.1% as No religion, 8.4% as Other and 7.2% as Not stated.
Other chart types
Many other types of chart are available. Here are some examples:
- Scatter plots
- Box plot
- Static tree map
- Interactive tree map
- Dot plot showing distribution
- Heat map
- Slope charts: baby girl names by age of mother and baby boy names by age of mother
We advise to test your charts with users to see if they are working as you planned.
Ideas for testing
- Tweet an image of your chart and ask for general feedback on it
- Tweet an image of your chart alongside a Twitter poll to ask a specific question you want feedback on.
- Post your chart on the Basecamp for Presentation and Dissemination of Statistics and Analysis to ask members for their feedback – join the Basecamp if you are not on it already.
- Ask colleagues for their opinions – avoid picking colleagues that work or have worked on your data.
- Ask your Presentation or Dissemination champion for help with getting feedback.
DataConnect22 session on making charts accessible
Materials from session on “Making charts accessible” delivered as part of DataConnect22. These materials include the recording, slides and plain text versions of slides and the question and answer session.
Using our colour palettes in Microsoft, R and Python
We have also created guidance on how to implement all of our accessible colour palettes in Microsoft, R and Python on different chart types.
Resources from the Analysis Function Central Team:
- Charts: a checklist
- Data visualisation e-learning
- Data visualisation: colours
- Using our colour palettes in Microsoft, R and Python
- Data visualisation: tables
- Data visualisation: infographics
- Releasing statistics in spreadsheets
- Resources to use with our releasing statistics in spreadsheets guidance
- Making analytical publications accessible
If you have any further questions you can:
- email Analysis.Function@ons.gov.uk
- join our Basecamp project for accessibility for statistics and analysis or presentation and dissemination of statistics and analysis – if you are not on the Cross Government Basecamp, email Analysis.Function@ons.gov.uk for an invite link
- contact your departmental presentation or web dissemination champion
- contact us through Twitter @gov_analysis