Skip to content
Pinky UI

Annotated Timeline

A trend and its meaningful events share one reading structure so change has context, instead of a plain line chart with a caption underneath explaining what happened.

Live example

Try the interaction before reading the recipe.

real component · keyboard-safe

Tue15k

Campaign. The first campaign widened the audience.

Launch timelineA trend with 3 contextual event markers. Use arrow keys for data points or tab to an event marker.

Purpose

A trend and its meaningful events share one reading structure so change has context, instead of a plain line chart with a caption underneath explaining what happened.

Good for

  • Trends where releases, incidents or campaigns explain a change

Avoid for

  • Full project planning timelines or arbitrary task scheduling

Usage

tsx
<AnnotatedTimeline data={trend} annotations={events} label="Launch timeline" />

Accessibility

  • Event markers are labelled buttons with focus, pressed state and a readable context panel.
  • The chart still exposes Arrow/Home/End point reading when no event is selected.

Performance

  • Annotations are a small set of positioned buttons; there is no timeline-sized DOM canvas.

Related: timeline-scrubber, interactive-line-chart.

Source: packages/skills/data/annotated-timeline.md