Options

The options prop controls structural timeline configuration.

TempisTimelineConfig

Changes to the options prop trigger a full instance destroy and recreate. This ensures the timeline is always in sync with the configuration, but means frequent changes here are more expensive than updating reactive data props.

Property	Type	Default	Description
`responsive`	`boolean`	`false`	Resize canvas to match parent dimensions.
`verticalFill`	`TempisTimelineVerticalFillMode`	`"scroll"`	Vertical fill behaviour.
`rtl`	`boolean`	`false`	Right-to-left layout.
`stackMode`	`TempisTimelineStackMode`	`"compact"`	Item stacking strategy.
`selection`	`TempisTimelineItemSelectionMode`	`"none"`	Selection mode.
`range`	`TempisTimelineRangeOptions`	—	Range configuration.
`legend`	`TempisTimelineLegendOptions`	—	Legend configuration.
`tooltip`	`TempisTimelineTooltipOptions`	—	Tooltip configuration.
`style`	`TempisTimelineStyleOptions`	—	Style overrides.
`scrollbar`	`TempisTimelineScrollbarOptions`	—	Scrollbar options.
`grouping`	`TempisTimelineGroupingOptions`	—	Grouping options.

Example

<TempisTimeline
  :items="items"
  :options="{
    responsive: true,
    verticalFill: 'fill-canvas',
    selection: 'multi',
    stackMode: 'compact',
    range: {
      start: '2026-01-01',
      end: '2026-06-01',
      position: 'bottom',
      zoom: { enabled: true, min: 86400000, max: 31536000000 }
    },
    legend: { position: 'bottom', alignment: 'center' },
    tooltip: { enabled: true, delay: 300 },
    style: { item: { borderRadius: 6, fontColor: '#fff' } }
  }"
/>