chart.js value is two but only one display tooltip

Question

I have web monitoring data and I want to graph with chart js library in javascript. Multiple data are at the same moment. However, 'tooltip' displays only one piece of data. Why is this? Please help me :(

1. I (A) Login-swlee.zabbix.dev selected and time is 06/25 02:23:21
2. I (B) First page-swlee.zabbix.dev selected and time is 06/25 02:23:21
3. I (A) and (B) both selected but tooltip is only one.

```

var colors = ["#FEB500", "#5F8CFC", "#ADC803", "#F0605D"]
var list = data.list;
var list2 = data.list2;
var list3 = data.list3;

var datasets = [];
var labels = [];

for (i = 0; i < list3.length; i++) {
   var date = new Date(list3[i].clock * 1000).getTime();
   if (labels.indexOf(date) < 0) {
      labels.push(date);
   }
}
labels.sort();
var tbody = document.getElementById('webTable').children[1];

for (var i = 0; i < list.length; i++) {
   var item = list[i];
   var td_name = [];
   for (var j = 0; j < list2.length; j++) {
      var item2 = list2[j];
      if (item.hosts[0].hostid == item2.hostid && item2.key_.indexOf('web.test.rspcode') > -1) {
         var label = item2.name.replace('$1', item2.key_.substring(17, item2.key_.length - 1).split(',')[0]).replace('$2', item2.key_.substring(17, item2.key_.length - 1).split(',')[1]);

         //line chart
         var dataset = {
            data: [],
            label: label,
            fill: false,
            spanGaps: true,
            borderColor: colors[i]
         };
         for (var k = 0; k < list3.length; k++) {
            var item3 = list3[k];
            if (item2.itemid == item3.itemid) {
               var date = new Date(list3[k].clock * 1000).getTime();
               dataset.data.push(null);
               if (labels.indexOf(date) > -1) {
                  dataset.data[labels.indexOf(date)] = item3.value;
               }
            }
         }
         datasets.push(dataset);
      }
   }
}

var ctx = document.getElementById("webChart").getContext("2d");

var gData = {
   labels: labels,
   datasets: datasets
}
var lineChart = new Chart(ctx, {
   type: 'line',
   data: gData,
   options: {
      responsive: true,
      scales: {
         yAxes: [{
            ticks: {
               stepSize: 200,
               suggestedMin: 0,
               suggestedMax: 600
            }
         }],
         xAxes: [{
            type: 'time',
            time: {
               unit: 'minute',
               round: 'minute',
               displayFormats: {
                  minute: 'h:mm'
               }
            },
            gridLines: {
               display: false
            }
         }]
      },
      elements: {
         line: {
            tension: 0,
         }
      },
      animation: false,
      hover: {
         animationDuration: 0,
      },
      responsiveAnimationDuration: 0,
      legend: {
         display: true,
         labels: {
            fontColor: '#fff'
         }
      },
      tooltips: {
         callbacks: {
            title: function(tooltipItems, data) {
               return new Date(tooltipItems[0].xLabel).format('MM/dd hh:mm:ss');
            }
         }
      }
   }
});

Answer 1

You need to set tooltip­'s mode to index ­­­­­­­­

...
tooltips: {
   mode: 'index', //<-- set this
   callbacks: {
      title: function(tooltipItems, data) {
         return new Date(tooltipItems[0].xLabel).format('MM/dd hh:mm:ss');
      }
   }
}
...