Graph and chart pattern library
Guidance for creating charts and tables and best practice for using colour.
On this page
When to use data visualisation (charts and graphs)
Show your key findings
Use charts when they help you explain the most important points in your data. A good visual can help people quickly understand a trend or pattern.
Avoid visuals that distract users
Only use a chart if it adds value. Do not include visuals that are:
- not linked to your main findings
- only supporting information
- introducing ideas that you do not explain in the main text
Keeping visuals focused helps people stay on track.
Place visuals close to the text they support
Your charts must work with your headings and main text. Put each chart near the section that explains it. This helps users understand what they are looking at and why it matters.
Use visuals to support clear communication
Make sure your data visualisations:
- are easy to read
- help people understand your message
- do not replace clear written explanation
A chart should make your message clearer, not more confusing.
Colours
Pick the right colour
#00483a - Green. This is the default colour for all charts.
#503b76 - Purple
#3a78bb - Blue
#da1c5c - Pink
More colours are on our pattern lab website.
Choosing a chart type
Use simple charts that will be familiar to users whenever possible. Complex or unfamiliar charts can be difficult to interpret and may obscure the relationships you are trying to display. See more on the ONS website and the civil service guidance.
Bar chart
Bar charts are the preferred method for comparing values across different categories for a single variable.
Use horizontal bar charts for most types of data.
| Label | £ thousands |
|---|---|
| London | 59.9 |
| South East | 36.2 |
| Oxford | 29.6 |
| Bristol | 22.1 |
Pie chart
A pie chart is a simple way to show parts that make up a single total. They are most effective when there are a small number of categories with significant differences in size.
| Label | Series 1 |
|---|---|
| Council tax | 75 |
| Central government grants | 23 |
| Business rates | 11 |
| Fees and charges | 9 |
Line graph
Use a line chart to display trends over time. Line charts are particularly effective for showing how multiple data series have changed over time.
| Label | Units sold |
|---|---|
| January | 35 |
| February | 40 |
| March | 45 |
| April | 50 |
| May | 55 |
| June | 180 |
| July | 260 |
| August | 230 |
| September | 60 |
| October | 45 |
| November | 40 |
| December | 35 |
Showing the table of data
You can show the table of data under the chart.
| Label | £ thousands |
|---|---|
| London | 59.9 |
| South East | 36.2 |
| Oxford | 29.6 |
| Bristol | 22.1 |