Home icon
Data Visualisation Guide

Responsiveness: adapting annotations, axes and legends

5 minutes read

Responsive data visualisation

Especially in news graphics, annotations highlighting and explaining data values and patterns in the data are popular and widespread (they also improve the understandability of visualisations). Of course, when the dimensions of a visualisation are reduced, there is less space to place these text elements. That is why they are often repositioned, reduced in length or even removed altogether in smaller versions of the visualisation.

Check the number, content and the placement of the text elements (including the chart title) on the following versions of the same chart, each designed to be shown on screens with decreasing size.

A bar chart showing the Total cost of major natural disasters over the 1980 - 2017 period. The biggest 5 disasters are labelled: with their names and total cost

Desktop version. Source: Techniques for Flexible Responsive Visualization Design, Hoffswell et al

The same chart as above, but with smaller dimensions. The title and subtitle are moved outside of the chart, the biggest disasters are still labelled

Tablet/phone in portrait mode version. Source: Techniques for Flexible Responsive Visualization Design, Hoffswell et al

In the version for phones, the cost of the disasters is removed from the text annotations, and the annotations are moved into the chart. The number of axis labels and grid lines on the y axis are also reduced

Phone portrait version. Source: Techniques for Flexible Responsive Visualization Design, Hoffswell et al

In the thumbnail version of the chart, only hurrican Katrina ia annotated and both the x and the y axis have only 2 labels

Thumbnail version. Source: Techniques for Flexible Responsive Visualization Design, Hoffswell et al

Other text elements in a chart are the axis labels and legends (together sometimes called guides). The number of axis labels can be reduced on smaller displays, and their formatting can be made more compact. Rotating the labels of the x axis is also an option, but because this compromises legibility, this is not good practice.

Consider the two following versions of a chart designed for small displays.

A line chart with a line for every EU member state, with Sweden, Ireland and the EU average labelled and highlighted with colour

Source: Maarten Lambrechts, CC BY 4.0

The same line chart as above, but with all but the three coloured lines removed, and the number of labels and grid lines for the y axis reduced

Source: Maarten Lambrechts, CC BY 4.0

In the latter version, the data in the background is left out, and the number of labels on both the x and y axis are reduced. The formatting for the years on the x axis is also made more compact.

When data points are sufficiently labelled, axes can be left out completely, just as legends.

Another solution when many annotations are present and when the annotations are important and can not be left out, is to move them out of the chart, to a separate space below the chart for example.

Annotations can be integrated into a visualisation when its dimensions allow it. Source: Datawrapper

When space is limited, the annotations can be listed below the visualisation. Source: Datawrapper

Related pages

Responsive text annotations

Annotated chart narrative visualisation

Text annotations: introduction

Labelling scatter plots

Choosing charts: the medium

Labels and axis annotations

Responsive data visualisation