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, or using:
- buttons or tabs
- a drop-down menu
- 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 input box
Baby names in England and Wales
When to use an interactive chart
Only consider interactive charts where the information that is most important for the user cannot be clearly shown through a non-interactive chart.
An example of a strong user need for an interactive chart is COVID-19 data at a local level. 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
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 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.
- try to 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
- 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 ONS interactive charts and uses elements from the ONS pattern library.