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)_
- Plot ranges, points, markers and backgrounds
- Smooth touch gestures (pinch-to-zoom, up to 2-finger panning)
- Adjustable timestamp labels per scale
- Minimal styling
- Customizable

Live demo

API documentation and examples

Usage

``sh
npm add vue-timeline-chart
`

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

$3


`html
:groups="groups"
:items="items"
:markers="markers"
:viewportMin="1691089380000"
:viewportMax="1691101020000"
:minViewportDuration="1000 * 60"
:maxViewportDuration="1000 60 60 24 7"
@mousemoveTimeline="onMousemoveTimeline"
@mouseleaveTimeline="onMouseleaveTimeline"
>



`

Development

$3


`
pnpm install
`

$3

`
pnpm start
`

$3

`
pnpm dev
``

$3

- VS Code + Volar