Line chart component

[petejobeskinandcarta]

What

A line chart for the display of data. Line charts are primarily used to display time series data so that the user can visually understand what the data is showing and identify trends.

Why

Line charts are widely used, including across GOV.UK, but there is presently no component or guidance within the design system on best practice. They are used both in publishing and in services.

The pandemic was a good example of where usable, accessible and understandable data needed to be disseminated by government and components had to be built from scratch to do so.

There's a strong working example from DEFRA on the Check for Flooding Service.

There is presently no component in the GOV.UK Design System that deals with the display of data. There is great guidance published by the Gov Analysis Function but nothing in the design system itself.

Anything else

Useful links

Existing backlog issue on Data
#16

Check for flooding service
https://check-for-flooding.service.gov.uk/station/5171

HM Treasury | Public spending statistics
https://www.gov.uk/government/statistics/public-spending-statistics-release-november-2023/public-spending-statistics-november-2023#trends-in-public-spending

DWP | Family Resources Survey
https://www.gov.uk/government/statistics/family-resources-survey-financial-year-2021-to-2022/family-resources-survey-financial-year-2021-to-2022#pension-participation-1

DFT | Travel time measures
https://www.gov.uk/government/statistics/travel-time-measures-for-the-strategic-road-network-and-local-a-roads-january-to-december-2022/travel-time-measures-for-local-a-roads-january-to-december-2022-report#local-a-roads-average-speed

DLUHC | Affordable housing supply in England
https://www.gov.uk/government/statistics/affordable-housing-supply-in-england-2022-to-2023/affordable-housing-supply-in-england-2022-to-2023#comparison-with-overall-housing-supply

[simonwhatley]

The GOV.UK publishing components have an experimental chart component, which may be interesting here.

This component takes a set of data and presents it as a line graph and a table with one or more rows and lines.

The chart relies upon Chartkick and renders using JavaScript, so the table is provided as a fallback for those who lack JavaScript, an accessible view of the data for screenreaders, and a simple view of the raw data for all users.