Timeline

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

Peer build is designed to work well with other packages from the Vis family. Compared to the standalone or legacy builds it doesn't include dependencies which allows the same DataSet (and other dependencies) to be used in Timeline and other packages (e.g. Network). In UMD version this build doesn't suffer from the bug where exported members from different packages get overwritten rendering some functionality unusable.

When to use

When you need multiple packages from the Vis family on the same page or finer control over what gets loaded to for example reduce bundle size by omitting unneeded locales or want to reuse a single copy of Moment throughout your app.

How to use

Browser UMD

<!--
  In the following URLs you may want to replace @latest by @version
  to prevent unexpected potentionally breaking updates.
  For example vis-data@1.0.0 instead of vis-data@latest.
-->
<script type="text/javascript" src="https://unpkg.com/moment@latest"></script>
<script type="text/javascript" src="https://unpkg.com/vis-data@latest/peer/umd/vis-data.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/vis-timeline@latest/peer/umd/vis-timeline-graph2d.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/vis-timeline/styles/vis-timeline-graph2d.min.css" />
<!-- You may include other packages like Vis Network or Vis Graph3D here. -->
<!-- You can optionally include locales for Moment if you need any. -->

<div id="visualization"></div>
<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 } from "vis-data/peer";
import { Timeline } from "vis-timeline/peer";
import "vis-timeline/styles/vis-timeline-graph2d.css";
// You may import from other packages like Vis Network or Vis Graph3D here.
// You can optionally include locales for Moment if you need any.

// 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);
      

<div id="visualization"></div>