Charts

Usage notes

An example of this component, in use with a chart and data-table can be found on the T5 template.

The chart control was created mainly for use in the time-series to ensure that the primary and secondary user needs are met, specifically:

• Allow the download of the time series data as CSV or Excel files (for the expert analysts), as user surveys have highlighted that the majority of users had downloaded data from the ONS website
• Download additional data (for expert analysts and information foragers)
• View this time series as chart (for information foragers)

Usage notes

In general, horizontal bar charts should be used as they display well on reduced screen sizes.

Zebra striping has been included to allow the user to determine the category to which the value applies.

Usage notes

Different shaped points are used as well as colour (which are in keeping with the ONS colour guidelines so that colour alone isn't used to indicate which data set the line is applicable to.

Adding the shapes to the tooltip helps differentiate between the data points.

All data values are shown in the tooltip (as a pose to the point currently hovered over) as some points may stack.

Note: The inline height style is shown here as an example. Inline styles should not be used in production ready code.

Usage notes

The stacked bar chart changes from vertical to horizontal on devices of reduced screen sizes. Switching type rather than relying on resizing the chart is a more robust approach, as managing chart labels at smaller sizes becomes a difficult challenge.

The interactive legend is important for a data set such as the one used in this example. Renewable sources has a much smaller range than the other values, and so to show any kind of meaning within the chart, the ability to toggle other values, to include and exclude them from the chart, is required.

Changing the scale on filter in this way could lead to misrepresentation of the data. However, whilst this isn't ideal, it represents the best solution.

Usage notes

These charts are primarily used in the Time Series pages.

In the context of the time-series pages (and ideally most situations), the line chart should be used at full page width so that any onward journey is secondary to the primary requirement of displaying data.

This is particularly important when considering one of the core design principles of 'it’s all about the numbers'.

In addition, whilst the charts are responsive, as much space should be given to the chart so that the information can be clearly relayed to the user.

On resizing, the number of data points that are included in the x-axis are reduced so that the chart displays well on small screen sizes.