Skip to content
Pinky UI

data

Annotated Timeline

A trend and its meaningful events share one reading structure so change has context.

  • data
  • chart
  • timeline
  • annotation
  • events

Live preview

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.

Quick usage

usage
import { AnnotatedTimeline } from "@pinky-ui/systems";

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

Presets

Default

Restrained production behaviour.

Default behaviour

Quiet

Reduced intensity for dense product screens.

disabled={true}

Install

Add @pinky-ui/systems as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell
npm install @pinky-ui/systems

Prefer to run the whole repository locally instead?

repository
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Props

PropTypeDefaultDescription
annotationsTimelineAnnotation[]—Indexed events with concise labels and context.
classNamestring—Styles the outer interaction surface.

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.

Reduced motion

Motion resolves immediately while semantics, focus and state remain unchanged.

When to use

  • Trends where releases, incidents or campaigns explain a change

When not to use

  • Full project planning timelines or arbitrary task scheduling

Skill

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.

Open this skill on its own page