Basic example

Jan 1, 1970 00:00

00:00:10

00:00:20

00:00:30

00:00:40

00:00:50

Group 1

Group 2

Code

<script setup>
  import {  } from 'vue-timeline-chart';
  import 'vue-timeline-chart/style.css';

  const  = [
    { : 'group1', : 'Group 1' },
    { : 'group2', : 'Group 2' },
  ];

  const  = [
    { : 'group1', : 'point', : 1705878000000, : { '--item-background': 'var(--color-2)' } },
    { : 'group1', : 'range', : 1707135072000, : 1708431072000, : { '--item-background': 'var(--color-4)' } },
    { : 'group2', : 'range', : 1706790600000, : 1706877000000 },
  ];
</script>

<template>
  <
    =""
    =""
    ="1703112200000"
    ="1714566600000"
  />
</template>

TIP

Setting the viewportMin and viewportMax is useful for determining the initial zoom level.
It also prevents scrolling outside of the given range.