Vue Timeline Chart

Appearance

Getting Started ​

vue-timeline-chart is a simple yet versatile Vue 3 component that allows you to plot points or ranges on a timeline. You can zoom in/out, scroll horizontally and update content dynamically.

Feel free to report issues, make PR's and start discussions.

Installation ​

bash
pnpm add vue-timeline-chart
bash
npm add vue-timeline-chart
bash
yarn add vue-timeline-chart

Usage ​

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

  // Add items to plot and groups to categorize them:
  const 
items
 = [
    { 
id
: 'item1', 
group
: 'group1', 
type
: 'point', 
start
: 1705878000000, 
cssVariables
: { '--item-background': 'var(--color-2)' } },
    { 
id
: 'item2', 
group
: 'group1', 
type
: 'range', 
start
: 1707135072000, 
end
: 1708431072000, 
cssVariables
: { '--item-background': 'var(--color-4)' } },
    { 
id
: 'item3', 
group
: 'group2', 
type
: 'range', 
start
: 1706790600000, 
end
: 1706877000000 },
  ];
  const 
groups
 = [
    { 
id
: 'group1', 
label
: 'Group 1' },
    { 
id
: 'group2', 
label
: 'Group 2' },
  ];
</script>

<template>
  <!-- Add the component to your template, passing the items and groups as props: -->
  <
Timeline

    
:groups
="
groups
"
    
:items
="
items
"
    
:viewportMin
="1703112200000"
    
:viewportMax
="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.

Result ​

Jan 1, 1970 00:00
00:00:10
00:00:20
00:00:30
00:00:40
00:00:50
Group 1
Group 2