vue-timeline-chart

vue-timeline-chart

A simple yet versatile Vue 3 component that allows you to plot points or ranges on a timeline.
Zoom in/out, scroll horizontally and update content dynamically.

Live Demo · Documentation · Report Issue · Discussions

Features

• Zooming — zoom in and out with scroll or pinch gestures
• Infinite scrolling — native horizontal scroll events (shift+scroll to convert vertical to horizontal)
• Flexible data — plot ranges, points, markers and backgrounds
• Stacking — overlapping items can be dynamically stacked
• Touch support — smooth pinch-to-zoom and up to 2-finger panning (with momentum)
• Adjustable labels — timestamp labels adapt per scale
• Minimal styling — staying out of your way
• Customizable — use events, slots, methods and CSS variables to adapt to your needs

Getting started

Installation

pnpm add vue-timeline-chart

Setup

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

# Build and watch for changes
pnpm dev

Recommended IDE Setup

VS Code + Volar