Create a new timeline instance.
new TempisTimeline(context: string | HTMLCanvasElement, options: TempisTimelineOptions)The context parameter accepts either a CSS selector string pointing to a <canvas> element, or a direct reference to one.
// Using a selector
const timeline = new TempisTimeline('#my-canvas', { items: [...] });
// Using an element reference
const canvas = document.getElementById('my-canvas') as HTMLCanvasElement;
const timeline = new TempisTimeline(canvas, { items: [...] });| Property | Type | Default | Description |
|---|---|---|---|
items | TempisTimelineItem[] | required | The items to display. |
responsive | boolean | false | Whether to automatically resize the canvas to match parent container dimensions. |
verticalFill | "content" | "fill-canvas" | "grow-canvas" | "content" | Defines how the timeline fills vertical space. |
rtl | boolean | false | Whether to use right-to-left rendering. |
stackMode | "compact" | "stable" | "stable" | The item stacking behaviour. |
selection | "none" | "single" | "multi" | "none" | Item selection mode. |
categories | TempisTimelineCategory[] | — | Item categories. |
bands | TempisTimelineBand[] | — | Timeline bands. |
dependencies | TempisTimelineDependency[] | — | Item dependencies rendered as connector arrows. |
range | TempisTimelineRangeOptions | — | Range configuration. |
legend | TempisTimelineLegendOptions | — | Legend configuration. |
tooltip | TempisTimelineTooltipOptions | — | Tooltip configuration. |
style | TempisTimelineStyleOptions | — | Style overrides. |
scrollbar | TempisTimelineScrollbarOptions | — | Scrollbar options. |
grouping | TempisTimelineGroupingOptions | — | Grouping options. |
accessibility | TempisTimelineAccessibilityOptions | — | Accessibility options (keyboard, ARIA). |
minimap | TempisTimelineMinimapOptions | — | Minimap overview bar. Provide to enable. |
responsive: true, the canvas must be inside a container with explicit dimensions. The timeline resizes to fill its parent — if the parent has no width or height, the canvas will collapse to zero.| Method | Description | Details |
|---|---|---|
setItems(items) | Replace all items and redraw. | Items |
getItems() | Get current item definitions. | Items |
setCategories(categories) | Replace all categories and redraw. | Categories |
getCategories() | Get current category definitions. | Categories |
setBands(bands) | Replace all bands and redraw. | Bands |
setDependencies(deps) | Replace all dependencies and redraw. | Dependencies |
setGroupCollapsed(group, collapsed?) | Set or toggle a group's collapsed state. | Grouping |
isGroupCollapsed(group) | Check if a group is collapsed. | Grouping |
focus(options?) | Navigate to an item, date, or range. | Focus |
getRange() | Get the current visible range. | Range |
setSelection(ids) | Programmatically select items by ID. | Selection |
getSelection() | Get selected item IDs. | Selection |
clearSelection() | Deselect all items. | Selection |
toImage(options?) | Export as PNG, JPEG, or WebP blob. | Image Export |
redraw() | Force a redraw. | — |
destroy() | Clean up all listeners and resources. | — |
Removes all event listeners, disconnects observers, cancels animations, and clears the canvas. Always call this before removing the timeline from the DOM to prevent memory leaks.
destroy() when removing the timeline from the DOM to prevent memory leaks from orphaned event listeners and resize observers.timeline.destroy();In frameworks like React, the <TempisTimeline> component handles this automatically on unmount.