Minimap

A compact overview bar for navigating large timelines.

Overview

The minimap renders a thin horizontal bar at the bottom of the canvas showing the full data range. Coloured indicators mark where items exist in time, and a highlighted rectangle shows the current viewport position. Click or drag the minimap to navigate.

Pan and zoom the timeline above, then look at the minimap bar at the bottom.

TempisTimelineMinimapOptions

Provide a minimap config object to enable the minimap. Omit it entirely to disable.

Property	Type	Default	Description
`height`	`number`	`40`	Height of the minimap bar in pixels.
`backgroundColor`	`string`	`"rgba(128,128,128,0.06)"`	Background colour of the minimap area.
`viewportColor`	`string`	`"rgba(128,128,128,0.15)"`	Colour of the viewport indicator overlay.

Example

import { TempisTimeline } from '@tempis/timeline';

const timeline = new TempisTimeline('#canvas', {
  responsive: true,
  minimap: { height: 44 },
  items: [
    { id: 1, label: 'Item 1', start: '2026-01-05', end: '2026-02-15', grouping: 'Group 1' },
    { id: 2, label: 'Item 2', start: '2026-02-10', end: '2026-03-20', grouping: 'Group 1' },
    { id: 3, label: 'Item 3', start: '2026-03-01', end: '2026-04-10', grouping: 'Group 2' },
    { id: 4, label: 'Item 4', start: '2026-04-05', end: '2026-05-15', grouping: 'Group 2' },
  ],
  range: { start: '2026-01-01', end: '2026-03-01', position: 'bottom' }
});

Behaviour

Click anywhere on the minimap to jump the viewport to that position.
Drag the minimap to scrub through the timeline continuously.
The viewport indicator shows the currently visible range relative to the full data extent.
Item indicators use their background colour, grouped by row to reflect the timeline's grouping structure.
The minimap respects RTL mode — time flows right-to-left when rtl: true.

The minimap is hidden during image export via toImage(). Exported images show only the timeline content without navigation chrome.

When to Use

The minimap is most useful when the timeline spans a large time range and users frequently zoom into specific sections. It provides spatial context — users can always see where they are relative to the full dataset.

For timelines that show all data at once without zooming, the minimap adds little value and can be omitted.