Customise the look of the timeline, items, and text.
| Property | Type | Description |
|---|---|---|
font | TempisTimelineFont | Default font settings (size, family, style, weight, lineHeight). |
item | TempisTimelineItemStyle | Default item style overrides applied to all items. |
gridColor | string | Colour for all grid lines, unit labels, group labels, and separators. Defaults to "#808080". |
| Property | Type | Default | Description |
|---|---|---|---|
family | string | "Helvetica, Arial, sans-serif" | Font family string. |
size | number | 14 | Font size in pixels. |
weight | string | number | "normal" | Font weight. |
style | string | "normal" | Font style (normal, italic). |
lineHeight | string | — | CSS line-height value. |
| Property | Type | Default | Description |
|---|---|---|---|
backgroundColor | string | palette colour | Item background colour. |
fontColor | string | — | Item label colour. |
padding | number | — | Inner padding in pixels. |
borderColor | string | — | Border colour. |
borderThickness | number | — | Border width in pixels. |
borderStyle | TempisTimelineLineStyle | "solid" | Border line style: solid, dashed, dotted, dash-dot, or long-dash. |
borderRadius | number | — | Corner radius in pixels. |
Styles are resolved in the following order. Each level overrides the one below it:
style — highest priority, set on individual items
style — applied to all items in a category
style.item — from the constructor options
const timeline = new TempisTimeline('#canvas', {
responsive: true,
style: {
font: { family: 'Inter, sans-serif', size: 13, weight: 500 },
item: {
backgroundColor: '#334155',
fontColor: '#f1f5f9',
borderColor: '#475569',
borderThickness: 1,
borderStyle: 'solid',
borderRadius: 6,
padding: 6
}
},
items: [
{ id: 1, label: 'Item 1', start: '2026-01-05', end: '2026-01-15' },
{ id: 2, label: 'Item 2', start: '2026-01-12', end: '2026-01-28' },
{
id: 3, label: 'Item 3 (Styled)', start: '2026-01-20', end: '2026-01-22',
style: { backgroundColor: '#dc2626', borderStyle: 'dashed' }
},
],
range: { start: '2026-01-01', end: '2026-02-01', position: 'bottom' }
});Use gridColor to change the colour of all grid lines, axis labels, group labels, and separators. This is useful when embedding the timeline on coloured or dark backgrounds.
const timeline = new TempisTimeline('#canvas', {
responsive: true,
style: {
gridColor: '#6366f1',
item: { borderRadius: 6, fontColor: '#fff', padding: 8 }
},
items: [
{ id: 1, label: 'Item 1', start: '2026-02-01', end: '2026-02-14', grouping: 'Group 1' },
{ id: 2, label: 'Item 2', start: '2026-02-08', end: '2026-02-22', grouping: 'Group 1' },
{ id: 3, label: 'Item 3', start: '2026-02-05', end: '2026-02-18', grouping: 'Group 2' },
{ id: 4, label: 'Item 4', start: '2026-02-15', end: '2026-02-28', grouping: 'Group 2' },
],
range: { start: '2026-01-25', end: '2026-03-05', position: 'bottom' }
});