{"id":46300306,"url":"https://github.com/laurens94/vue-timeline-chart","last_synced_at":"2026-03-04T11:03:00.915Z","repository":{"id":194944159,"uuid":"674243176","full_name":"laurens94/vue-timeline-chart","owner":"laurens94","description":"A timeline component for Vue3","archived":false,"fork":false,"pushed_at":"2025-12-01T03:44:20.000Z","size":533,"stargazers_count":103,"open_issues_count":10,"forks_count":8,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-12-03T08:38:47.855Z","etag":null,"topics":["chart","component","graph","timeline","timeline-component","vue","vue3"],"latest_commit_sha":null,"homepage":"https://laurens94.github.io/vue-timeline-chart/","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/laurens94.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"github":"laurens94","ko_fi":"lauwerens"}},"created_at":"2023-08-03T13:19:34.000Z","updated_at":"2025-12-01T03:44:24.000Z","dependencies_parsed_at":"2023-10-02T20:29:23.241Z","dependency_job_id":"5f4e1094-6089-4035-ad26-3f4d6d836b87","html_url":"https://github.com/laurens94/vue-timeline-chart","commit_stats":null,"previous_names":["laurens94/vue-timeline-chart"],"tags_count":52,"template":false,"template_full_name":null,"purl":"pkg:github/laurens94/vue-timeline-chart","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/laurens94%2Fvue-timeline-chart","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/laurens94%2Fvue-timeline-chart/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/laurens94%2Fvue-timeline-chart/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/laurens94%2Fvue-timeline-chart/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/laurens94","download_url":"https://codeload.github.com/laurens94/vue-timeline-chart/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/laurens94%2Fvue-timeline-chart/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30078415,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-04T08:01:56.766Z","status":"ssl_error","status_checked_at":"2026-03-04T08:00:42.919Z","response_time":59,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chart","component","graph","timeline","timeline-component","vue","vue3"],"created_at":"2026-03-04T11:02:57.306Z","updated_at":"2026-03-04T11:03:00.761Z","avatar_url":"https://github.com/laurens94.png","language":"Vue","funding_links":["https://github.com/sponsors/laurens94","https://ko-fi.com/lauwerens"],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e\n  Vue 3 Timeline Chart component\n\u003c/h1\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/laurens94/vue-timeline-chart\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/v/release/laurens94/vue-timeline-chart\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/vue-timeline-chart\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/vue-timeline-chart\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/vue-timeline-chart\"\u003e\n    \u003cimg src=\"https://img.shields.io/bundlephobia/min/vue-timeline-chart\"\u003e\n  \u003c/a\u003e\n\u003cp\u003e\n\n\u003cp align=\"center\"\u003e\n  A simple yet versatile vue3 component that allows you to plot points or ranges on a timeline.\u003cbr\u003e\n  You can zoom in/out, scroll horizontally and update content dynamically.\n\u003cp\u003e\n\n\u003cp align=\"center\"\u003e\n  Feel free to report \u003ca href=\"https://github.com/laurens94/vue-timeline-chart/issues/new\"\u003eissues\u003c/a\u003e, make PR's and start \u003ca href=\"https://github.com/laurens94/vue-timeline-chart/discussions/new/choose\"\u003ediscussions\u003c/a\u003e.\n\u003cp\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/user-attachments/assets/0164911c-2178-4f92-acca-a92df1371448\" alt=\"timeline with customized styling\"\u003e\n\u003c/p\u003e\n\n## Features\n\n- Zooming\n- Infinite scrolling _(using native horizontal scroll events, use shift+scroll to convert vertical to horizontal mouse scrolling)_\n- Plot ranges, points, markers and backgrounds\n- Smooth touch gestures (pinch-to-zoom, up to 2-finger panning)\n- Adjustable timestamp labels per scale\n- Minimal styling\n- Customizable\n\n## [Live demo](https://laurens94.github.io/vue-timeline-chart/examples/basic-example.html)\n\n## [API documentation and examples](https://laurens94.github.io/vue-timeline-chart/reference/props.html)\n\n## Usage\n\n```sh\nnpm add vue-timeline-chart\n```\n\n```ts\nimport { Timeline } from 'vue-timeline-chart'\nimport 'vue-timeline-chart/style.css'\n```\n\n### Example\n```html\n\u003cTimeline\n  :groups=\"groups\"\n  :items=\"items\"\n  :markers=\"markers\"\n  :viewportMin=\"1691089380000\"\n  :viewportMax=\"1691101020000\"\n  :minViewportDuration=\"1000 * 60\"\n  :maxViewportDuration=\"1000 * 60 * 60 * 24 * 7\"\n  @mousemoveTimeline=\"onMousemoveTimeline\"\n  @mouseleaveTimeline=\"onMouseleaveTimeline\"\n\u003e\n  \u003ctemplate #group-label=\"{ group }\"\u003e\n    {{ group.label }}\n  \u003c/template\u003e\n\n  \u003ctemplate #item=\"{item}\"\u003e\n    \u003cdiv\n      :title=\"item.title || null\"\n      style=\"inset: 0; position: absolute;\"\n    \u003e\u003c/div\u003e\n  \u003c/template\u003e\n\u003c/Timeline\u003e\n```\n\n## Development\n\n### Install dependencies:\n```\npnpm install\n```\n\n### Dev server with live reloading\n```\npnpm start\n```\n\n### Building the application and watching for changes\n```\npnpm dev\n```\n\n### Recommended IDE Setup\n\n- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flaurens94%2Fvue-timeline-chart","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flaurens94%2Fvue-timeline-chart","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flaurens94%2Fvue-timeline-chart/lists"}