Chart (experimental) example
Bar chart with all colours
There are six colours. After that, charts should show black bars. Not that charts like this one are not recommended to be used in production, as GSS recommended a maximum of four categories. This is just to demonstrate all the available colours.
How it looks (preview)
Chart 6: Vehicle miles travelled by vehicle type in Great Britain, 2019 to 2025
Chart 6 is a bar chart that shows that car traffic levels in 2025 increased by 2.5% from 2024, and were similar to pre-pandemic (2019) levels.
This chart is a visual representation of the data available in the table.
Source: Department for Transport
View data as a table
| 2019 | 2020 | 2021 | 2022 | 2023 | 2024 | 2025 | 2026 | |
|---|---|---|---|---|---|---|---|---|
| Cars | 250 | 200 | 220 | 240 | 245 | 247 | 250 | 260 |
| Vans | 51 | 45 | 50 | 50 | 50 | 50 | 50 | 60 |
| Lorries | 15 | 13 | 13 | 15 | 13 | 11 | 10 | 15 |
| Motorcycles | 3 | 1 | 1 | 1 | 1 | 1 | 1 | 5 |
| Buses | 5 | 1 | 1 | 1 | 1 | 1 | 1 | 5 |
How to call this example
<%= render "govuk_publishing_components/components/chart", {
header_three_quarters: true,
chart_type: "column",
heading: "Chart 6: Vehicle miles travelled by vehicle type in Great Britain, 2019 to 2025",
h_axis_title: "Vehicle type",
v_axis_title: "Billion vehicle miles",
description: "Chart 6 is a bar chart that shows that car traffic levels in 2025 increased by 2.5% from 2024, and were similar to pre-pandemic (2019) levels.",
hide_legend: true,
source: "Department for Transport",
keys: [
"Cars",
"Vans",
"Lorries",
"Motorcycles",
"Buses"
],
rows: [
{
label: 2019,
values: [
250,
51,
15,
3,
5
]
},
{
label: 2020,
values: [
200,
45,
13,
1,
1
]
},
{
label: 2021,
values: [
220,
50,
13,
1,
1
]
},
{
label: 2022,
values: [
240,
50,
15,
1,
1
]
},
{
label: 2023,
values: [
245,
50,
13,
1,
1
]
},
{
label: 2024,
values: [
247,
50,
11,
1,
1
]
},
{
label: 2025,
values: [
250,
50,
10,
1,
1
]
},
{
label: 2026,
values: [
260,
60,
15,
5,
5
]
}
]
} %>