Chartjs-How to limit chart JS hover to take only one value from each line chart when zoomed out?

by

0👍

Ok, here is the solution I came up with, followed by this ChartJS issue on GitHub. I’ve made a filter for tooltip and it looks like this now:

    plugins: {
        tooltip: {
          mode: 'x',
          displayColors: false,
          intersect: false,
          filter: function (tooltipItem, currentIndex, tooltipItems) {
            // On zoomed out graph, hovering mouse picks a lot of data for x-axis and displays them all in tooltip.
            // This filter returns only first item from each dataSet from hover picked items passed
            // to tooltip, so it can be correctly displayed in tooltip for different line charts(datasets)
            return tooltipItems[currentIndex].datasetIndex !== tooltipItems[currentIndex - 1]?.datasetIndex
          },
         .
         .
         .
     }

Hover still selects multiple data, but the tooltip shows only one for each dataset.

Leave a comment