Vue 3 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
- **Touch support** — smooth pinch-to-zoom and up to 2-finger panning
- **Adjustable labels** — timestamp labels adapt per scale
- **Minimal styling** — easy to customize to your needs
## Getting started
### Installation
```sh
pnpm add vue-timeline-chart
```
### Setup
```ts
import { Timeline } from 'vue-timeline-chart'
import 'vue-timeline-chart/style.css'
```
### Example
```html
{{ group.label }}
```
## Development
```sh
# Install dependencies
pnpm install
# Dev server with live reloading
pnpm start
# Build and watch for changes
pnpm dev
```
### Recommended IDE Setup
[VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar)
