Categories

Colour-code items and filter them via an interactive legend.

TempisTimelineCategory

Property	Type	Description
`name`	`string`	Unique identifier referenced by items.
`label`	`string`	Display label in the legend.
`style`	`TempisTimelineItemStyle`	Style applied to all items in this category.

An item's category value must match the name of a defined category. Items referencing an undefined category will still render but won't receive category styling.

Category styles sit between global styles and per-item styles in the precedence chain. Global style.item is applied first, then category style overrides it, and finally per-item style takes highest priority.

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

const timeline = new TempisTimeline('#canvas', {
  responsive: true,
  categories: [
    { name: 'cat-a', label: 'Category A', style: { backgroundColor: '#6366f1', fontColor: '#fff' } },
    { name: 'cat-b', label: 'Category B', style: { backgroundColor: '#f43f5e', fontColor: '#fff' } },
    { name: 'cat-c', label: 'Category C', style: { backgroundColor: '#10b981', fontColor: '#fff' } },
  ],
  legend: { position: 'top' },
  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-12', category: 'cat-b' },
    { id: 3, label: 'Item 3', start: '2026-02-10', end: '2026-02-20', category: 'cat-c' },
    { id: 4, label: 'Item 4', start: '2026-02-15', end: '2026-03-01', category: 'cat-a' },
    { id: 5, label: 'Item 5', start: '2026-02-18', end: '2026-03-05', category: 'cat-c' },
  ],
  range: { start: '2026-01-25', end: '2026-03-10', position: 'bottom' }
});

Methods

setCategories(categories)

Replaces all categories and redraws.

getCategories()

Returns the current category definitions.

Colour Palette

Categories without an explicit backgroundColor are assigned colours from the global palette. See Color Palette.