CODEWITHSUNDEEP
javascriptchart.js2
JustLooking
JustLooking

Reputation: 2486

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

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?

Upvotes: 5

Views: 4576

Answers (2)

Mohsin Shaikh
Mohsin Shaikh

Reputation: 31

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

Upvotes: -1

ɢʀᴜɴᴛ
ɢʀᴜɴᴛ

Reputation: 32889

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.

Upvotes: 14

Related Questions