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.

  • @click: {time: number, event: MouseEvent, item: TimelineItem | null}
  • @contextmenu: {time: number, event: MouseEvent, item: TimelineItem | null}
  • @mousemoveTimeline: {time: number, event: MouseEvent}
  • @mouseleaveTimeline: {event: MouseEvent}
  • @changeViewport: { start: number, end: number }
  • @changeScale: { unit: string, step: number }

Preview:

Visualize Your Data With The Vue 3 Timeline Chart Componnet

Changelog:

v1.1.2 (04/11/2024)

  • Having a prop viewportMin, viewportMax, initialViewportStart or initialViewportEnd with the value of 0 would act as if it was undefined.

v1.1.1 (04/02/2024)

  • Horizontal swiping on a trackpad should now properly block history navigation

v1.1.0 (02/20/2024)

  • Added maxZoomSpeed prop to prevent zooming too fast.

Add Comment