Control how the timeline fills vertical space and how items are stacked.
Vertical Fill
Stack Mode
| Mode | Description |
|---|---|
"content" | The timeline height is determined by its content. It takes up only as much vertical space as needed to render all visible items. Best for timelines embedded in scrollable pages. This is the default. |
"fill-canvas" | The timeline expands to fill the full height of the canvas element, regardless of content height. Best for dashboard widgets and fixed-height containers. |
"grow-canvas" | The canvas element itself grows to match the required content height. Best when the timeline is inside a scrollable container and you want all content visible without an internal scrollbar. |
const timeline = new TempisTimeline('#canvas', {
responsive: true,
verticalFill: 'fill-canvas',
items: [
{ id: 1, label: 'Item 1', start: '2026-01-05', end: '2026-01-15' },
],
range: { start: '2026-01-01', end: '2026-02-01', position: 'bottom' }
});| Mode | Description |
|---|---|
"compact" | Items are stacked based on visible items only. More compact, but items may shift position when panning. Point-in-time labels are adjusted to fit within canvas bounds. Layout updates on every pan. |
"stable" | All items are included in the layout calculation. Items maintain stable positions when panning. Point-in-time labels are always centred on their timestamp. Layout only updates on zoom or data changes. This is the default. |
const timeline = new TempisTimeline('#canvas', {
responsive: true,
stackMode: 'compact',
items: [
{ id: 1, label: 'Item 1', start: '2026-01-05', end: '2026-01-19', grouping: 'Group 1' },
{ id: 2, label: 'Item 2', start: '2026-01-20', end: '2026-02-02', grouping: 'Group 1' },
{ id: 3, label: 'Item 3', start: '2026-01-08', end: '2026-01-22', grouping: 'Group 2' },
],
range: { start: '2026-01-01', end: '2026-02-15', position: 'bottom' }
});