Skip to content
InsightCharts

Search

Search guides and components

Timeline poster

A poster of change over a run of periods: a full-width ribbon of bands whose thickness is each entity's value and whose order is its rank (`ribbon-chart`), a strip of two to four dated figures under it, and a bottom row with one measure per period as thick bars (`block-bar`) and one share at several dates as nested outlines (`nested-shares`).

Use when
Use it when the subject is how 4 to 8 named things grew, shrank and changed places over 4 to 10 periods: electricity by source, library loans by format, commuters by mode. Give hero the periods and entities, milestones the dated numbers a reader should take away, bars one measure of the whole at each period and shares one share at a few dates. State the latest value in the title.
Avoid when
A single series over time (use line chart or area chart in a poster). Events with start and end dates (use timeline chart or the timeline story template). More than 8 entities or 10 periods, because the bands get too thin to label. Positions on one scale (use scale poster). Parts of one subject at one date (use radial poster).

Preview

The preview scrolls inside its frame. A poster has the same colours in the site's light and dark modes. The toolbar has the poster themes and a PNG download. Expand it to see it in place, or open it full screen.

Full screen

Composition

  1. Atoms61
  2. Molecules19
  3. Templates20
  4. Infographics10

Built from

The timeline poster template is assembled from 1 molecule and 3 poster primitives. Any slot also takes any other component.

Molecules

1

Poster

The sheet an infographic is composed on. It paints a full-bleed ground from a poster theme, forces one theme and colour mode on everything inside, and lays out a masthead, a grid of panels and a footer. It can save the whole sheet as one PNG.

Poster primitives

3

Block bars

Compares 3 to 12 values as thick rounded bars from a zero baseline, with each value printed inside the end of its bar and the category beneath.

Nested shares

Shows several shares of the same whole, such as one share at five dates, as outlines nested from one corner of a square, each enclosing an area equal to its share.

Ribbon chart

One filled band per entity across periods: its thickness is its value in each period and its vertical position is its rank, so bands cross as the order changes.

Installation

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

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 { TimelinePoster } from "insightcharts";

Examples

Paper, library loans, with download

Dusk, long-format rows, bars linked to the ribbon

Props

PropTypeDefaultDescription
herorequired{ data, x, y, series?, values?, labels?, colorBy?, format?, highlight?, title?, ... } | SlotThe hero: one band per entity across the periods, drawn by ribbon-chart. Wide rows take y as a list of columns; long rows take y and series. A full spec or element replaces it.
milestones{ at: string; value: string; label: string; context?: string; icon?: string }[]Two to four dated figures in a strip under the hero, in time order. at is the period, printed in small capitals over the figure.
bars{ data, name, value, marker?, detail?, format?, title?, ... } | SlotBottom left: one measure at each period as thick bars with the numbers inside (block-bar). marker: { after, label } draws a dotted line after one period to mark an event.
shares{ data, name, value, wholeLabel?, highlight?, format?, title?, ... } | SlotBottom right: one share at 2 to 8 dates as outlines nested in one square (nested-shares). format defaults to "{value}%". With only one of bars and shares, that one takes the full width.
titlerequiredstringThe poster's one fact, as a plain sentence with its number.
kickerstringSmall label above the title: the topic.
subtitlestringOne line under the title: the measure, population and period.
themePosterThemeName | string | ThemeInput"sunrise"Poster theme: noir, magenta, dusk, ocean, forest, blueprint, sunrise, paper, any other theme name, or a theme object.
mode"light" | "dark" | "auto" | "system""light"Colour mode of the poster and everything in it. A poster paints its own ground and does not follow the page unless you set auto. Only paper has a different dark variant.
downloadbooleanfalseShow a "Download PNG" control under the poster that saves the whole poster as one image.
maxWidthnumber | string1100Widest the poster is drawn. It is centred in wider containers.
linkedbooleanfalseMake the marks clickable. Clicking a mark in one graphic highlights the same name in every other graphic that has it, and filters the graphics that read the shared data. Click it again, or the empty ground of that graphic, to clear.
dataDataInputRows shared by every region whose config leaves out its own data. With linked, a click filters those regions.
sourcesstring | string[]Where the data comes from, shown in the footer.
notestringCaveat shown in the footer, e.g. "Illustrative data".
creditstringWho made the poster, shown at the right of the footer.
level1 | 2 | 3 | 4 | 52Heading level of the title. Panel headings are one level down.