Data visualisation: charts

Introduction

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

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 criteria in the Web Content Accessibility Guidelines 2.2.

This includes charts.

Consequences for inaccessible content

Content on public sector websites that does not meet the Web Content Accessibility Guidelines 2.2 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.

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?

Statistical relationships

After you have decided on the message, consider the statistical relationship you’re trying to show.

The right chart will 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

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.

Chart size

A chart should follow the natural flow of content. It should not be much wider or narrower than the text around it.

What to supply with charts

Titles

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

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.

Source

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.

Data download

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.

Chart footnotes

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)

Formatting charts

Keep it simple

Avoid:

• 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.

Chart labels

All axes, series, sectors 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:

• 1
• 54
• 172
• 5,670
• 12,620

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.

Annotations

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

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

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.

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).

Notes:

• 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

It also:

• 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

Bar charts

Using bar charts

Bar charts are versatile. They work well when comparing the size of different categories.

Time series

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

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.

Ranking

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

Deviation

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

Distribution

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

Context

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.

Colours

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.

Value labels

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

Part-to-whole

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.

Not part-to-whole

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.

Ordering

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

Negative values

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

Colours

See our colours guidance for advice on using colour in stacked bar charts.

Legends

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.

Example

• Chart 16 in this release on trade from Welsh Government 

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

Colours

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

Legends

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.

Line charts

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.

Line thickness

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.

Labelling lines

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

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

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

Volatility

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

Context

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.

Misinterpretation example

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.

Manipulation example

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.

If you are dealing with breaks in time series caused by impacts of Coronavirus (COVID 19) you might find it useful to read our Tips for communicating the impact of coronavirus (COVID-19).

Aspect ratios 

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.

Pie charts

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

Colours

When pie charts present two variables we recommend using the dark blue and orange colours from our palette. Put a white border around each sector 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 sector at the 12 o’clock position.

Labels

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

Value labels can be useful on a pie chart (as long as the pie is limited to four categories or fewer)

Example

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.

Source: Religion in England and Wales 2011

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

Testing 

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.

Resources

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 created guidance on how to implement all of our accessible colour palettes in Microsoft, R and Python on different chart types.

R and Python colour palette packages

The Analysis Standards and Pipelines (ASAP) team have also created packages in Python and R for the colour palettes.

They are open source and available for anyone across government to use when creating data visualisations. It will be great for those working in DAP and they will eliminate the need for copy and pasting codes from the webpage.

For more information on how to install and use the packages, please read the R afcolours documentation, or py_af_colours documentation if you are using Python.

Please get in touch if you have any questions or feedback, by emailing Analysis.Function@ons.gov.uk.

Related links

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
• Dashboards

Other links

• ONS blog posts on data visualisation
• ONS guidance on data visualisation
• Colour contrast checker
• Analysis Function YouTube channel 
• Questions to ask when you see a graph
• How to write accessible descriptions for interactive charts
• “A case study in alt text” blog

Any questions?

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