Skip to content

Custom timestamp labels

0
1000
2000
3000
4000
5000
6000
7000
8000
9000
10000
11000
12000
13000
14000
15000
16000
17000
18000
19000
20000
21000
22000
23000
24000
25000
26000
27000
28000
29000
30000
31000
32000
33000
34000
35000
36000
37000
38000
39000
40000
41000
42000
43000
44000
45000
46000
47000
48000
49000
50000
51000
52000
53000
54000
55000
56000
57000
58000
59000

Code

vue
<script setup>
  const items = [
    { group: '1', type: 'range', start: 1000, end: 4500, cssVariables: { '--item-background': 'var(--color-2)' } },
    { group: '1', type: 'range', start: 4500, end: 6000, cssVariables: { '--item-background': 'var(--color-4)' } },
    { group: '2', type: 'range', start: 6000, end: 8000 },
  ];
</script>

<template>
  <Timeline
    :items="items"
    :groups="[{id: '1'}, {id: '2'}]"
    :viewportMin="0"
    :viewportMax="8000"
    :renderTimestampLabel="(timestamp) => timestamp"
  />
</template>