Visualize Your Data With The Vue 3 Timeline Chart Componnet

Install & Download:

# NPM
$ npm install vue-timeline-chart

Description:

The timeline chart component enables you to build interactive timelines with scrolling, zooming, and dynamic updates in Vue 3 apps.

It can be used to visualize diverse data over time – like histories, schedules, processes, and more.

Items can represent the timeline’s points, ranges, backgrounds, and markers. The viewport settings control the visible time range and zoom level. Slots allow customizing item content, labels, and group rendering.

How to use it:

1. Install & import the Timeline component.

import { Timeline } from ‘vue-timeline-chart’
import ‘vue-timeline-chart/style.css’

2. Create a basic grouped timeline chart as follows:

<Timeline
  :groups="groups"
  :items="items"
  :markers="markers"
  :viewportMin="1691089380000"
  :viewportMax="1691101020000"
  :minViewportDuration="1000 * 60"
  :maxViewportDuration="1000 * 60 * 60 * 24 * 7"
  @mousemoveTimeline="onMousemoveTimeline"
  @mouseleaveTimeline="onMouseleaveTimeline"
>
  <template #group-label="{ group }">
    {{ group.content }}
  </template>
  <template #item="{item}">
    <div
      :title="item.title || null"
      style="inset: 0; position: absolute;"
    ></div>
  </template>
</Timeline>

3. All possible component props.

groups?: TimelineGroup[{
  id: string;
  content: string;
  className?: string;
}];
items?: TimelineItem[{
  type: 'range'; // or 'point','background', 'marker'
  className?: string;
  start: number;
  end?: number;
  id?: string;
  cssVariables?: Record<string, string>;
}];
markers?: TimelineMarker[];
viewportMin?: number;
viewportMax?: number;
minViewportDuration?: number;
maxViewportDuration?: number;
initialViewportStart?: number;
initialViewportEnd?: number;
renderTimestampLabel?: (timestamp: number, scale: { unit: string, step: number}) => string;
fixedLabels?: boolean;
minTimestampWidth?: number;
maxZoomSpeed?: number;
activeItems?: TimelineItem['id'][];

4. Events.