Dependencies

Render connector arrows between items to show relationships.

Connectors are only drawn when both the source and target items are visible in the current view. Panning one item off-screen will hide the connector.

TempisTimelineDependency

Property	Type	Description
`source`	`string \| number`	The ID of the source item (arrow starts here).
`target`	`string \| number`	The ID of the target item (arrow points here).
`style`	`TempisTimelineDependencyStyle`	Optional style overrides for this connector arrow.

TempisTimelineDependencyStyle

Property	Type	Default	Description
`color`	`string`	grid colour	Colour of the connector line and arrowhead.
`lineWidth`	`number`	`1.5`	Line thickness in pixels.
`lineStyle`	`TempisTimelineLineStyle`	`"solid"`	Line style: `solid`, `dashed`, `dotted`, `dash-dot`, or `long-dash`.

Usage

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

const timeline = new TempisTimeline('#canvas', {
  responsive: true,
  items: [
    { id: 1, label: 'Item 1', start: '2026-01-05', end: '2026-01-12', grouping: 'Group 1' },
    { id: 2, label: 'Item 2', start: '2026-01-14', end: '2026-01-22', grouping: 'Group 1' },
    { id: 3, label: 'Item 3', start: '2026-01-13', end: '2026-01-25', grouping: 'Group 2' },
    { id: 4, label: 'Item 4', start: '2026-01-31', end: '2026-02-05', grouping: 'Group 2' },
  ],
  dependencies: [
    { source: 1, target: 2, style: { color: '#ef4444', lineWidth: 2 } },
    { source: 1, target: 3, style: { color: '#f59e0b', lineStyle: 'dashed' } },
    { source: 2, target: 4 },
    { source: 3, target: 4, style: { color: '#10b981', lineStyle: 'dotted' } },
  ],
  range: { start: '2026-01-01', end: '2026-02-10', position: 'bottom' }
});

Methods

setDependencies(dependencies)

Replaces all dependencies and redraws. Does not affect item layout — only the connector arrows are updated.

timeline.setDependencies([
  { source: 1, target: 2 },
  { source: 2, target: 3 },
]);