Data visualisation: charts

If you have any feedback on this guidance please let us know. Use the feedback box or email Analysis.Function@ons.gov.uk.

Policy details

Metadata item Details
Publication date:19 May 2022
Author:Analysis Function Central Team
Who this is for:People in government who design and publish charts
Type:Guidance
Contact:Analysis.Function@ons.gov.uk

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.

Back to top of page

Webinar

A session on data visualisation and accessibility was delivered as part of Analysis in Government Month 2022.

You can:

 

Back to top of page

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 criterion in the Web Content Accessibility Guidelines 2.1.

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:

Non-text content

This is criterion 1.1.1 (A level).

It states:

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

It states:

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

Back to top of page

Basics: publishing charts

HTML or image?

If the website you publish on has the functionality to build charts within the HTML code, and this is known to meet accessibility standards, you should 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.

It is best practice to use the SVG format when publishing images of charts.

More information about creating and publishing SVG images of charts can be found 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.

Back to top of page

Basics: 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 message of the chart.

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.

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

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 data from the chart, give a table. If you expect them to take a message away, give a text description of the message.

If you use a text description our advice is that this should live in the body of the page directly underneath the chart. The image of the chart should be marked as decorative and therefore hidden from screen reader software.  More information on alternative text, including the reasoning behind this guidance, can be found in our ‘Making analytical publications accessible’ guidance.

Source

If all your charts come from the same source you do not need to repeat the source under each one.

If your publication draws data from several different sources 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: [organisation] – [publication or source of data], for example “Office for National Statistics – Annual Survey of Hours and Earnings”.

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.

The data download should be linked to 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)

Example

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

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: Office for National Statistics – Baby names for boys in England and Wales, 2020 edition

Download the data for Figure 1 (ODS, 4.6KB).

Notes:

  • The ranking is produced using 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
Back to top of page

Basics: 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, 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 are essential images of text. 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 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.

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

3. Consider colours

Consider the colours used for your labels. See the section on ‘Colours for axes and labels’ in our colours guidance.

4. 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 a years axis on a line chart) you should centrally align the labels over the tick marks.
  • When an axis shows categorical data, labels should be aligned between tick marks.
  • You can use more tick marks than labels.
  • If there is space to do so you should always label the final tick.
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.

Grid lines

Grid lines 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 between four to eight.
    • 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.

Back to top of page

Choosing the right chart

First consider the story. What message is your chart aiming to get across? When you have decided on that, it will make it choosing the right chart much easier.

After you have decided on the message, consider the statistical relationship you’re trying to show. There are nine types of statistical relationship highlighted in the Financial Times Visual Vocabulary.

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.

RelationshipExampleRecommended chart types
DistributionPopulation by ageBar chart, population pyramid, box plot, dot plot
Time seriesPrice inflation over timeLine chart, calendar heat map
Ranking Schools ranked by performanceBar chart, lollipop chart, slope chart
DeviationRail company performance compared with targetBar chart
CorrelationRelationship between weight and heightScatterplot, line graph
MagnitudeAverage income by regionBar chart
SpatialGeographical clusters of notifiable diseasesMap
Part-to-wholeTotal economic production by industrial sectorPie chart, donut chart, tree map, bubble chart
FlowTrade between countriesSankey graph

 

Back to top of page

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.

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

Avoid breaking the y-axis on bar charts

The y-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 y-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.

Back to top of page

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

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

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

 

This example shows two way 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

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. This will make it easier to match the label to the data.

Example: matching the order and orientation of the legend to the bar

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.

Back to top of page

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

Legends and accessibility

In general, we should not rely on colour as the only way to match labels to data. But when using clustered bar charts there is often no other option. See our colours guidance for more information on how to make clustered bar charts as accessible as possible.

Back to top of page

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 also be seen as illustrating provisional data, a target or a subcategory of another data series.

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 a 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 diptheria 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.

The break in the y axis draws attention to the fact that rates of immunisation against diptheria and MMR fell following the publication of an article by Wakefield AJ et al in The Lancet in 1998. Rates increased a few years later and in 2013 were higher than they were before 1998. But it 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.

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.

Back to top of page

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

Find out more about using colour in pie charts and how to make sure they are presented in an accessible way.

Order of categories

Rank the categories in a pie chart by size and start the first segment 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

Back to top of page

Other chart types

Many other types of chart are available. Here are some examples:

Back to top of page

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.
Back to top of page

Related links

Guidance from the Analysis Function Central Team:

Other links

Back to top of page

Any questions?

If you have any further questions you can:

Back to top of page
  • If you would like us to get in touch with you then please leave your contact details or email Analysis.Function@ons.gov.uk directly.
  • This field is for validation purposes and should be left unchanged.