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

<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>