Skip to content
InsightCharts

Search

Search guides and components

Timeline story

A story told in date order. It has a headline, one overview exhibit of the whole period (a timeline chart or an annotated line), dated chapters along a rail, a closing paragraph and a source note. Each chapter has a short text and an optional small exhibit.

Use when
Use it when the reader needs the events in date order to understand a change. State the change over the whole period in the headline, with the numbers and dates. Mark the main events on the overview exhibit as annotations. Give each chapter one event. Add a small figure to a chapter only when it has a number to show. Mark the two or three most important events with emphasis.
Avoid when
Events with no measure that runs through the period (use a plain annotated timeline). A comparison of two states with nothing in between (use comparison brief). More than eight chapters. Merge minor events into the text of the chapter before or after.

Preview

A template is a whole page, so the preview scrolls inside its frame. Expand it to read it in place, or open it full screen.

Full screen

Energy

Coal generated 39% of Britain's electricity in 2012 and 0.6% in 2024

The first public coal power station opened in 1882. The last coal plant closed on 30 September 2024.

By the data desk

Coal's share of generation fell from 65% in 1990 to 0.6% in 2024

Share of Great Britain's electricity generated from coal, 1990 to 2024

Source: Department for Energy Security and Net Zero and National Grid ESO (rounded) · Figures are approximate, for illustration

Coal's share fell in two periods. It fell from 65% to 35% between 1990 and 1998, when generators built gas plants. It fell from 39% to 9% between 2012 and 2016, after the carbon price floor was introduced.

  1. Step 1882: The first public coal power station opens in London

    Thomas Edison's company built the plant at Holborn Viaduct. It supplied street lamps and nearby buildings.

  2. Step 1990s: Coal's share falls from 65% to 35% between 1990 and 1998

    Privatised generators built gas plants, which were cheaper and quicker to build than coal plants. Coal's share was between 28% and 39% from 1998 to 2013.

  3. Step April 2013: The carbon price floor takes effect

    The floor set a minimum price on power-station emissions. The rate doubled in 2015. Coal's share fell from 22% in 2015 to 9% in 2016.

    Coal share of generation, 2012 to 2016

  4. Step 21 April 2017: The first full day without coal since 1882

    Britain had 1 coal-free day in 2017. It had 180 in 2020.

    Coal-free days per year

  5. Step 30 September 2024: Ratcliffe-on-Soar, the last coal plant, shuts down

    The plant had run since 1968. In 2024 wind generated 30% of the country's electricity and gas generated 26%.

    Coal share of generation since October 2024
    0%
    Britain was the first G7 country to end coal power

Coal generated 0.6% of Britain's electricity in 2024, all of it before 30 September. Gas generated 26%.

Sources
Digest of UK Energy Statistics; National Grid ESO
Data
1990 to 2024
Note
Annual shares are rounded. Intermediate years before 2012 are interpolated for the chart. Figures are approximate, for illustration.

Composition

  1. Atoms61
  2. Molecules19
  3. Templates20

Built from

The timeline story template is assembled from 1 molecule and 9 atoms, 2 of which it reaches only through a molecule. Any slot also takes any other component.

Molecules

1

Atoms

9

Bar chart

Compares a value across categories with bars from a zero baseline.

Headline

The opening block of a piece or section: kicker, title, one-sentence deck and a byline/date line.

Line chart

Shows how one or more values change over time or another ordered dimension.

Prose

A readable block of narration at a 45-75 character measure, for the text between charts.

Directly, and throughAnnotated timeline

Source note

A sourcing footer for a whole piece: sources with optional links, the period covered, method, caveats and credit.

Timeline chart

Places events and spans on a time axis in labelled lanes, with each item named directly.

Step marker

A numbered chapter or step heading ("01 — Electricity sources in 2015") for sequencing the sections of a story.

ThroughAnnotated timeline

Installation

$ pnpm dlx shadcn@latest add @insightcharts/timeline-story

The CLI copies the source into your project and needs the @insightcharts registry in components.json; see installation. With the package, import it by name:

import { TimelineStory } from "insightcharts";

Examples

Sport: a timeline chart as the overview, exhibits below

Athletics

The men's marathon record fell from 2:04:55 to 2:00:35 between 2003 and 2023

Seven men held the record in that time. Carbon-plated shoes went on sale in 2017. The last two record-holders ran in them.

The record fell by 142 seconds between 2014 and 2023

Men's marathon world record holders and related events, 2003 to 2025

Source: World Athletics

  1. Step September 2003: Paul Tergat runs 2:04:55 in Berlin

    He was the first man to run a marathon in under 2:05.

  2. Step September 2008: Haile Gebrselassie runs 2:03:59 in Berlin

    It was his second record in 12 months. He was 35.

  3. Step September 2014: Dennis Kimetto runs 2:02:57 in Berlin

    The record stood for four years.

  4. Step May 2017: Eliud Kipchoge runs 2:00:25 at the Breaking2 exhibition

    The run used rotating pacemakers on a racing circuit, so it did not count as a record. Kipchoge wore prototype carbon-plated shoes. The shoes went on sale that summer.

  5. Step September 2018: Eliud Kipchoge lowers the record by 78 seconds to 2:01:39

    It was the largest single improvement since 1967. He ran 2:01:09 in 2022.

    Improvement on Kimetto's record
    −78 s
    The previous four records improved by 29 seconds on average

  6. Step October 2023: Kelvin Kiptum runs 2:00:35 in Chicago

    It was his third marathon. He was 23. He died in a road accident four months later.

No one has run under two hours in a record-eligible race. Kiptum's 2:00:35 is 35 seconds slower than two hours.

Source
World Athletics record progression
Data
2003 to 2025
Note
Figures are approximate, for illustration

Props

PropTypeDefaultDescription
titlerequiredstringThe change over the whole period, as one plain sentence with the numbers and dates in it.
kickerstringSmall label above the title.
deckstringOne-sentence standfirst.
bylinestringAuthor line.
datestringPublication date.
timelineSlotThe overview exhibit: a timeline-chart spec, or a line-chart with the events as annotations. Default height 360px for line charts.
introstring | string[]A paragraph between the overview and the chapters.
chaptersTitlestringHeading over the chapters.
chaptersrequired{ date, title, text?, exhibit?, emphasis? }[]The dated chapters, oldest first. date is shown as written; exhibit is a small chart or figure; emphasis fills the marker for a major event.
exhibitPosition"below" | "side""side"Where a chapter's exhibit sits; side falls back to below under 640px.
closingstring | string[]A closing paragraph that states the latest figures.
sourcesstring | { name, url? } | (string | { name, url? })[]Where the data comes from, shown in the closing source note. Entries with a url are linked.
periodstringThe period the data covers.
methodstringHow the numbers were produced: definitions, adjustments, exclusions.
notestringCaveats the reader should know, e.g. "Illustrative data".
creditstringWho made the piece.
level1 | 2 | 3 | 4 | 5 | 61Heading level of the title; section headings follow one level down.
maxWidthnumber | stringWidest the piece may get. It is centred in wider containers.
themeThemeInputTheme override, passed on to everything inside.
mode"auto" | "system" | "light" | "dark""auto"Colour mode, passed on to everything inside.