Legend

Display an interactive legend for category filtering and highlighting.

Position

Marker Style

The legend requires categories to be defined. Without categories, no legend will be rendered regardless of the position setting.

TempisTimelineLegendOptions

PropertyTypeDefaultDescription
position"top" | "bottom" | "none""none"Where the legend is rendered.
alignment"start" | "center" | "end""start"Horizontal alignment of legend items.
markerStyle"square" | "square-rounded" | "circle""square-rounded"Shape of the colour marker next to each label.
isHighlightOnHoverbooleantrueHighlight matching items when hovering a legend entry.
isFilterOnClickbooleantrueToggle category visibility when clicking a legend entry.
gapnumber—Gap in pixels between legend items.

Example

const timeline = new TempisTimeline('#canvas', {
  responsive: true,
  categories: [
    { name: 'cat-a', label: 'Category A', style: { backgroundColor: '#6366f1' } },
    { name: 'cat-b', label: 'Category B', style: { backgroundColor: '#10b981' } },
  ],
  legend: {
    position: 'top',
    alignment: 'center',
    markerStyle: 'circle',
    isHighlightOnHover: true,
    isFilterOnClick: true,
    gap: 8
  },
  items: [
    { id: 1, label: 'Item 1', start: '2026-02-01', end: '2026-02-14', category: 'cat-a' },
    { id: 2, label: 'Item 2', start: '2026-02-05', end: '2026-02-20', category: 'cat-b' },
  ],
  range: { start: '2026-01-25', end: '2026-03-01', position: 'bottom' }
});