Skip to content
UI Kit
Accent color

Data stories

Infographics and scroll stories that tell numbers as pictures.

2 components · 10 variants
Switch category

data-story

Data story

Stories told with one chart. A chart that stays while the text scrolls past, a line with numbered notes, a line that draws itself while scrolling, small multiples on one scale and a projection steered with a slider.

Props and details · Data story

Sticky chart

The chart stands still while the steps scroll past. Each step lights up its stretch of the line, on phones the chart rides along at the top.

Open in Studio

Annotated line

One line with numbered notes on the moments that matter. A note lights up on the chart and in the list, a crosshair follows the pointer or the arrow keys.

Open in Studio

Line that draws

The line draws itself while you scroll, the number in the corner follows its tip and milestones appear when the line reaches them.

Open in Studio

Small multiples

Six small charts on one shared scale, so they compare honestly. The pointer moves through all of them at once and the values follow.

Open in Studio

What if

A projection the reader steers. The slider sets the yearly change, the line and the result follow, the dashed line keeps the starting assumption.

Open in Studio

infographic

Infographic

Numbers told as pictures. Out of 100 in a field of marks, sizes as true circles, where a whole goes, before and after per category and flows from sources to uses. All in the accent and the text colors.

Props and details · Infographic

Out of 100

A field of 100 marks. Each statement beside it lights up its share, row by row, arrow keys switch.

Open in Studio

Sizes compared

Circles whose area is the value, so the comparison is honest. They grow from the baseline as they scroll in, the largest in the accent.

Open in Studio

Where it goes

One bar of shares that fills from the left and a list with amount and share. A share lights up in both, the others step back.

Open in Studio

Before and after

Two moments per category. The dot travels from the old value to the new one as the chart scrolls in, the change stands next to the label.

Open in Studio

Flows

From sources to uses in bands whose width is the amount. They draw from left to right, a name lights up its bands.

Open in Studio

Similar components

More from Content, the same area of the kit.

Often combined with

Sections that usually sit next to Data stories on a page.

Often searched

Jump to

Copied to the clipboard