# Electricity dashboard

> An operations-style dashboard of the world's electricity mix: KPI tiles with sparklines, a 100% stacked column chart, a donut and a sortable table, from Ember data.

An operations-style dashboard in one HTML page: four KPI tiles with sparklines and deltas, a 100% stacked column chart, a donut for the latest year and a sortable table, laid out on a twelve-column CSS grid. It answers one question at a glance: how much of the world's electricity still comes from burning fossil fuels, and how fast is that changing?

## Generation at a glance

Ember yearly data · 2000–2025

Low-carbon share **42.6%**

*▲ +9.1 pp* since 2015 · Improving

Solar **8.8%**

*▲ +7.7 pp* since 2015 · Improving

Wind **8.5%**

*▲ +5.1 pp* since 2015 · Improving

Coal **33.0%**

*▼ −5.7 pp* since 2015 · Improving

## Share by source, 2000–2025

% of generation · hover a year



## The 2025 mix

hover a slice

Solar overtook wind in 2025, and together they now out-generate hydropower.

## Change by source

% of generation · click a header to sort

| Source | 2000 | 2015 | 2025 | vs 2015, pp |
| ------ | ---- | ---- | ---- | ----------- |

Other is oil (2.7% in 2025), bioenergy (2.2%) and geothermal, tidal and other renewables (0.3%).

## How it's built

- **The layout** is a twelve-column CSS grid inside the site's standard content column: a container query, not the viewport, decides that KPI tiles span three columns and the column chart and donut share a row 7 + 5 once the grid is 40rem wide.
- **Status color** is used only for the deltas, always with an arrow and the word "Improving", so it never carries meaning alone. Series colors are reserved for sources and stay the same in every chart, the legend and the table.
- **The columns and the donut** are SVG drawn from one array of numbers: seven series, stacked with a 1px gap, a crosshair-free hover that highlights the hovered year, and the donut's arcs computed with plain trigonometry.
- **The table** is a plain `<table>`, which htmlpress sorts by a click on any header, so sorting comes for free.

Source: [Ember, Yearly Electricity Data](https://ember-energy.org/data/) and the Energy Institute's Statistical Review of World Energy, as compiled by [Our World in Data](https://ourworldindata.org/electricity-mix). 2025 values are Ember's first estimate for the year.