vue-timeline-chart

Vue 3 Timeline Chart component

A simple yet versatile vue3 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.

Features

• Zooming
• Infinite scrolling (using native horizontal scroll events, use shift+scroll to convert vertical to horizontal mouse scrolling)
• Plotting ranges, points, markers and backgrounds
• Adjustable timestamp labels per scale
• Customizable

Live demo

API documentation and examples

Usage

npm add vue-timeline-chart

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

Example

<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.label }}
  </template>

  <template #item="{item}">
    <div
      :title="item.title || null"
      style="inset: 0; position: absolute;"
    ></div>
  </template>
</Timeline>

Development

Install dependencies:

pnpm install

Dev server with live reloading

pnpm start

Building the application and watching for changes

pnpm dev

Recommended IDE Setup

• VS Code + Volar