Chart.js 2.7.0 Grouped Horizontal Bar Chart, how to get tooltip to display data for one bar, not whole group?

Question

Here is a Grouped Horizontal Bar Chart:

http://jsfiddle.net/jmpxgufu/185/

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

        var chart = {
        options: {
        scales: {
                 yAxes: [{ barPercentage: 1.0 }],
          },
      tooltips: {
         callbacks: {
            label: function(tooltipItem, data) {
console.log(tooltipItem);
           return data.datasets[tooltipItem.datasetIndex].label +': ' + data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index].toLocaleString();
}
}
},          
          responsive: true,
          maintainAspectRatio: false,
          animation: {

                    onComplete: function(animation) {
                    }
                }
      },
        type: 'horizontalBar',
        data: {
            labels: ['Topic1'],
      datasets: [
      {
         label: 'Something',
         borderColor: 'blue',
         borderWidth: 1,
         backgroundColor: Color('blue').alpha(0.5).rgbString(),
         data: [40],
         fill: false
      },
      {
         label: 'Something else',
         borderColor: 'orange',
         borderWidth: 1,
         backgroundColor: Color('orange').alpha(0.5).rgbString(),
         data: [17],
         fill: false
      }
      ]
        }};

   var myLiveChart = new Chart(ctx, chart);

If you look at the chart, there are two bars (an orange and a blue) associated with the label 'Topic1'.

When I hover over just the orange bar it says:

Topic1
Something: 40
Something else: 17

When I hover over just the blue bar it says:

Topic1
Something: 40
Something else: 17

You will also notice that because there are two bars in the group, the function is executed twice, taking my string I am returning, and forming this "grouped" tooltip message (I put the console.log in there to show it is getting executed twice).

I only want the data for the bar I am hovering over.

When I hover over just the orange bar I want it to say:

Topic1
Something else: 17

When I hover over just the blue bar I want it to say:

Topic1
Something: 40

But, I haven't figured out how to determine which is the active bar (of the two).

What am I missing here?

Cowrie

Answer 1

To get the desired behavior that you are after, you would need to set tooltips mode to nearest / point :

tooltips: {
   mode: 'nearest'
}

from the docs :

# nearest
Gets the item that is nearest to the point. The nearest item is determined based on the distance to the center of the chart item (point, bar). If 2 or more items are at the same distance, the one with the smallest area is used. If intersect is true, this is only triggered when the mouse position intersects an item in the graph. This is very useful for combo charts where points are hidden behind bars.

Here is the working fiddle.

Trapp

Thank you so much! I switched from 2.5.0 to 2.8.0 and it broke this. I didn't know that I had to add a new property to the tooltips. – Hastings

Answer 2

tooltips: {
            mode: 'nearest',
            intersect: true
}

Newmodel

Code only answers are considered low quality. Without sufficient explaination, your answer is hard to understand. If the OP can't understand your answer, then he also won't be able to reproduce your possible solution. As such it would be worthless to him/her. Please add a sufficient explaination of your possible solution. – Lucilucia