vis.js onclick get value

When I click on the item in the timeline I can not get the title value. I can get the group but the title produces undefined. Is there a way to get the title. When I hover over the item the title will show as a tooltip.

var items = new vis.DataSet([
  { content: '', start:'2021-10-28 00:00:0', end:' 2021-10-28 01:59:59',group:'l0t',title: 'Bear',className: "green"},
  { content: '', start: '2021-10-28 02:00:01', end:'2021-10-28 03:59:58',group: 'l0t', title: 'Tiger',className: "green",}])
...
var timeline = new vis.Timeline(container, items, groups, options);
timeline.on("click", function (properties) {
  console.log(properties.group)
});

Solution

The click event passes a properties object as returned by the Timeline.getEventProperties(event) method, this is described further at https://visjs.github.io/vis-timeline/docs/timeline/#getEventProperties. This object has the ID of the item which was clicked rather than the item itself. The item must be retrieved from the DataSet using the ID.

timeline.on("click", function (properties) {
  if(properties.item){
    const item = items.get(properties.item);
    console.log(item.title);
  }
});

The click event fires on all clicks anywhere on the timeline, even those not on items in the background. As per the snippet above it's necessary to check properties.item to see if an item was clicked before loading from the DataSet.

An alternative would be to use the select event which only fires when an item is selected. However when using the select event you may need to factor in multiple items being selected, this is possible if multiselect: true is set in the timeline options.

Example with a click event and a select event is below. The multiselect code is present but commented out.

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

// Create a DataSet (allows two way data-binding)
var items = new vis.DataSet([
  { content: '', start:'2021-10-28 00:00:00', end:' 2021-10-28 01:59:59',group:'abc',title: 'Bear',className: "green"},
  { content: '', start: '2021-10-28 02:00:01', end:'2021-10-28 03:59:58',group: 'abc', title: 'Tiger',className: "green",}])

// Configuration for the Timeline
var options = {
  // multiselect: true
};

// Create a Timeline
var timeline = new vis.Timeline(container, items, options);

// Register click event
timeline.on("click", function (properties) {  
   // Check if an item was clicked on
   if(properties.item){
     // An item was clicked, get the item from dataset
     const item = items.get(properties.item);
     // Log the title
     console.log('click event - title:', item.title);
     
   } else {
     // Click was not on an item
     console.log('click event - no item');
   }
});

// Alternatively register select event
timeline.on("select", function (selection){
  // If you set `multiselect: false` or leave it unset then only one item can selected at once.
  // Therefore you can just use [0] to access the first item in the items array
  if(selection.items.length > 0){
    const item = items.get(selection.items[0]);  
    console.log('select event - title:', item.title);
  }
  
  // If `multiselect: true` is set in the options then there could be multiple items selected.
  // The above code is therefore not valid, instead it must loop through the items.
  // Loop through these items.
  //   for (let i = 0; i < selection.items.length; i += 1){
  //     var item = items.get(selection.items[i]);
  //     console.log('select event - title:', i, item.title);
  //   }
});

body,
html {
  font-family: sans-serif;
}

<script src="https://visjs.github.io/vis-timeline/standalone/umd/vis-timeline-graph2d.min.js"></script>
<link href="https://visjs.github.io/vis-timeline/styles/vis-timeline-graph2d.min.css" rel="stylesheet" />

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