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

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

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

<template>
  <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 2024
Mar
May
Group 1
Group 2