Without the hype
Charts you can play with: the site’s chart library
The dashboards and visual stories on this site are drawn by a small chart library I keep with the site: plain JavaScript, no framework, and one set of styles that follows light and dark. This page shows what it can do, using the figures from what you pay for in a megawatt-hour of electricity: the parts of a typical household bill under Ofgem’s price cap, each year since 2019.
Everything here can be clicked, dragged or played. Nothing needs a mouse: the same things work by touch and by keyboard.
One set of blocks, three shapes
A chart usually answers one question. A treemap shows how big each part is against the whole, ranked bars show which is biggest and by how much, and a tower shows how the total is built up. Here the same nine blocks do all three. Change the shape or the year and each block travels to its new place, so you can keep your eye on one of them.
Cost of a megawatt-hour on a household bill by part, 2019 to 2026
Point at a part in either chart, or tap it, to pick it out in both. Click a year's column to show that year above. 2026 is January to September. In 2022 and 2023 the government's Energy Price Guarantee paid part of the cap price shown here.
Numbers you can drag
A sum is easier to believe when you can change it. The underlined numbers below are controls: drag one left or right, or tab to it and use the arrow keys. A double click puts it back.
A home that uses kWh of electricity a year, at a unit with a standing charge of a day, pays a year. Spread over the electricity it uses, that is for each megawatt-hour, or a unit, of which is the standing charge.
£ a yearAnnual electricity bill by part, against the typical household
The tick on each bar is the typical household on the 2026 price cap: 2,700 kWh a year, 27.56p a unit and 55p a day.
£ per MWh, including the standing chargeCost of each megawatt-hour by how much electricity a home uses in a year
The standing charge is the same however little you use, so a low user pays more for each megawatt-hour and a high user less. The vertical line is the home in the sentence above.
What the charts do without being asked
These come with the library, so every page that uses it has them:
- They arrive. The first time a chart scrolls into view its bars grow and its lines draw on. Readers who have asked their device for less motion get the finished chart at once.
- They keep their place. When the numbers change, a bar grows or shrinks from where it was and a row that changes rank glides to its new position, rather than the chart being wiped and redrawn. The eye can follow what changed.
- They light up together. Charts that share a wrapper know they show the same things. Point at “Networks” in one and it is picked out in all of them.
- They work by touch and keyboard. A tap shows what a hover would. Anything that opens can be reached with Tab and opened with Enter or Space, and the draggable numbers are sliders to a screen reader.
How it works
The library is five small files in the site’s assets folder: calc.js (number formats and colours), viz.js (charts, tables and controls), story.js (scroll-driven stories), explore.js (the blocks, the player and the draggable numbers on this page) and their stylesheets. Each chart is made the same way: chart(element) returns an object with one method, update(options), which is called again whenever the data or the reader’s choices change. Colours come from a handful of CSS variables, which is why one set of charts follows both themes.
The figures are those behind the megawatt-hour story: a typical household under Ofgem’s price cap (2,700 kWh a year, single-rate electricity, direct debit, including VAT), by calendar year. How the parts are grouped, and the sources, are set out on that page. The sum in the second section is the 2026 unit rate and standing charge used there, with VAT included: 2,700 kWh × 27.56p + 365 days × 55p = £945 a year, or £350 for each megawatt-hour.