Timeline

A basic timeline. You can move and zoom the timeline, and select items.

Standalone build doesn't work with other packages from the Vis family because it bundles all dependencies. This leads to situation where DataSets (and other dependencies) from one package (e.g. Network) don't work in Timeline because Timeline expects it's own bundled DataSets to be used. It is inteded as a convenience build for cases where multiple packages are not necessary but ease of use is (like JSFiddle MWEs or examples). This build is available in ESM and UMD versions each of them has minified and unminified variant.

When to use

When the only thing you need is Timeline (no Network, Graph3D etc.) and don't want to deal with dependencies (all are bundled in this build ready to use).

How to use

Browser UMD

<script type="text/javascript" src="https://unpkg.com/vis-timeline/standalone/umd/vis-timeline-graph2d.min.js"></script>
<!--
  Including other packages like Vis Network or Vis Graph3D here won't work.
  You need the peer build to do that.
-->

<script type="text/javascript">
// DOM element where the Timeline will be attached
const container = document.getElementById("visualization");

// Create a DataSet (allows two way data-binding)
const items = new vis.DataSet([
  { id: 1, content: "item 1", start: "2014-04-20" },
  { id: 2, content: "item 2", start: "2014-04-14" },
  { id: 3, content: "item 3", start: "2014-04-18" },
  { id: 4, content: "item 4", start: "2014-04-16", end: "2014-04-19" },
  { id: 5, content: "item 5", start: "2014-04-25" },
  { id: 6, content: "item 6", start: "2014-04-27", type: "point" }
]);

// Configuration for the Timeline
const options = {};

// Create a Timeline
const timeline = new vis.Timeline(container, items, options);
</script>

Bundled ESM

import { DataSet, Timeline } from "vis-timeline/standalone";
import "vis-timeline/styles/vis-timeline-graph2d.css";

// DOM element where the Timeline will be attached
const container = document.getElementById("visualization");

// Create a DataSet (allows two way data-binding)
const items = new DataSet([
  { id: 1, content: "item 1", start: "2014-04-20" },
  { id: 2, content: "item 2", start: "2014-04-14" },
  { id: 3, content: "item 3", start: "2014-04-18" },
  { id: 4, content: "item 4", start: "2014-04-16", end: "2014-04-19" },
  { id: 5, content: "item 5", start: "2014-04-25" },
  { id: 6, content: "item 6", start: "2014-04-27", type: "point" }
]);

// Configuration for the Timeline
const options = {};

// Create a Timeline
const timeline = new Timeline(container, items, options);