https://github.com/laurens94/vue-timeline-chart
A timeline component for Vue3
https://github.com/laurens94/vue-timeline-chart
chart component graph timeline timeline-component vue vue3
Last synced: 3 months ago
JSON representation
A timeline component for Vue3
- Host: GitHub
- URL: https://github.com/laurens94/vue-timeline-chart
- Owner: laurens94
- License: mit
- Created: 2023-08-03T13:19:34.000Z (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2025-12-01T03:44:20.000Z (6 months ago)
- Last Synced: 2025-12-03T08:38:47.855Z (6 months ago)
- Topics: chart, component, graph, timeline, timeline-component, vue, vue3
- Language: Vue
- Homepage: https://laurens94.github.io/vue-timeline-chart/
- Size: 521 KB
- Stars: 103
- Watchers: 2
- Forks: 8
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
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](https://laurens94.github.io/vue-timeline-chart/examples/basic-example.html)
## [API documentation and examples](https://laurens94.github.io/vue-timeline-chart/reference/props.html)
## Usage
```sh
npm add vue-timeline-chart
```
```ts
import { Timeline } from 'vue-timeline-chart'
import 'vue-timeline-chart/style.css'
```
### Example
```html
{{ group.label }}
```
## 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](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar)