Range

Control the visible time window, axis position, and zoom behaviour.

TempisTimelineRangeOptions

Property	Type	Default	Description
`fixed`	`boolean`	`false`	Lock the range so users cannot pan or zoom.
`position`	`"top" \| "bottom" \| "both" \| "none"`	`"bottom"`	Where the time axis is rendered.
`start`	`string \| number \| Date`	—	Initial start of the visible range.
`end`	`string \| number \| Date`	—	Initial end of the visible range.
`min`	`string \| number \| Date`	—	Earliest date the user can scroll to.
`max`	`string \| number \| Date`	—	Latest date the user can scroll to.
`zoom`	`TempisTimelineRangeZoomOptions`	—	Zoom configuration (see below).
`minorUnit`	`TempisTimelineRangeUnitOptions`	—	Minor tick label font and format overrides.
`majorUnit`	`TempisTimelineRangeUnitOptions`	—	Major tick label font and format overrides.

If start and end are omitted, the timeline automatically fits to show all items.

Zoom Options

Property	Type	Default	Description
`enabled`	`boolean`	`true`	Enable or disable zooming.
`min`	`number`	—	Minimum visible range in milliseconds.
`max`	`number`	—	Maximum visible range in milliseconds.
`wheelSensitivity`	`number`	`1.0`	Mouse wheel zoom speed multiplier.
`pinchSensitivity`	`number`	`1.0`	Touch pinch zoom speed multiplier.

Setting zoom.min prevents users from zooming in too far (e.g. to millisecond level), while zoom.max prevents zooming out beyond a useful range.

Example

const timeline = new TempisTimeline('#canvas', {
  responsive: true,
  items: [
    { id: 1, label: 'Item 1', start: '2026-01-01', end: '2026-03-01' },
    { id: 2, label: 'Item 2', start: '2026-03-01', end: '2026-06-01' },
  ],
  range: {
    start: '2026-01-01',
    end: '2026-06-30',
    min: '2025-01-01',
    max: '2027-01-01',
    position: 'bottom',
    zoom: {
      enabled: true,
      min: 1000 * 60 * 60 * 24 * 7,   // 1 week minimum
      max: 1000 * 60 * 60 * 24 * 365,  // 1 year maximum
      wheelSensitivity: 1.2
    }
  }
});