Cookies on ons.gov.uk

Cookies are small files stored on your device when you visit a website. We use some essential cookies to make this website work.

We would like to set additional cookies to remember your settings and understand how you use the site. This helps us to improve our services.

View cookies

You have accepted all additional cookies. You have rejected all additional cookies. You can change your cookie preferences at any time.

Skip to main content

Advanced formats Interactive charts and animations

Overview

An interactive chart allows the user to change what the chart shows by taking an action.

Users can interact with a chart by:

  • scrolling
  • hovering
  • using buttons or tabs
  • selecting a drop-down menu
  • using an input box

This does not include charts where the only interactive element is a tooltip. A tooltip displays data values when the user hovers over or selects part of a chart.

Example of an interactive chart using a drop-down menu

The following interactive chart shows how we might use a drop-down menu.

Open this example in a new tab (Interactive population pyramid)

When to use an interactive chart

Only consider using an interactive chart where the most important information for the user cannot be clearly shown through a non-interactive chart.

An example of a strong user need for an interactive chart is coronavirus (COVID-19) data at a local level (opens in a new tab) . In this case:

  • users are likely to be most interested in data about their local authority
  • there is not a clear way of displaying data for each local authority without interactivity
  • at the time, it was a high-profile topic of interest across different users and locations

Disadvantages of interactive charts

Interactive charts need the user to make a selection to see information. This may:

  • make it more difficult for users to get messages
  • hide the main messages from users
  • prevent the chart from being useful outside of the Office for National Statistics (ONS) website, for example, on social media

They are also more complex and time consuming to produce; there may not always be enough resource to create an interactive chart.

If an interactive chart is not suitable, use charts that highlight the main points of interest or findings without needing user input. Consider using several small charts, known as small multiples, to avoid using too many categories in a single visualisation.

Your charts do not have to showcase everything in the data. Expert users will be able to download and explore the data.

Tips for creating an interactive chart

There are certain considerations you should be aware of when you create an interactive chart. For example:

  • only include data that will be important to your user
  • do not include all your data just because the interactive format allows it
  • design your chart in a way that helps the user get the most meaningful information, for example, by allowing the user to easily compare certain categories
  • provide context and help the user to navigate the data through annotations and the surrounding text
  • consider starting your visualisation from a view that either shows the main message without needing any interaction, or helps users navigate the chart
  • make sure the design of your interactive chart is consistent with other Office for National Statistics (ONS) interactive charts and uses elements from our Design system (opens in a new tab) 

Interactive maps

Zooming

Some maps need to have an element of interactivity for the user to zoom in and out to see the data clearly. This is particularly true for maps showing small geographical areas, like local authorities, or Middle-layer Super Output Areas (MSOAs).

Maps do not need to include the ability to zoom if the geographical areas shown are large enough to be presented clearly on a static map. For example, a map of the UK showing the devolved nations and English regions would not need a zoom feature.

Other interactive features

As with other charts, maps can also be interactive. This allows the user to select and change the data and categories shown. If you are creating this kind of interactive map, follow the guidance on interactive charts in the Service Manual.

Animations

Animations can sometimes be used to show data changes over time.

However, animations can make it difficult for users to see the whole story clearly. This is because not all of the data points are shown at once, so they may be difficult to compare.

Tips for creating an animation

There are certain considerations to be aware of when creating an animation. For example:

  • never make an animation the only way to get the information
  • make sure there is a way for the user to control the animation, for example, to pause or reset and navigate through the frames
  • keep the animated elements to a minimum, as using too many can be distracting and make it difficult to understand what the chart is showing

An example of an animated chart, that shows the distribution of COVID-19 antibodies by age, is available on our Coronavirus (COVID-19) Infection Survey article (opens in a new tab) 

Help improve this page

Let us know how we could improve this page, or share your user research findings. Discuss this page on GitHub (opens in a new tab) 

Back to top