ChartJS: get points information on hovering the points

Question

I have successfully got the information by onClick function. But is there any method i can get the point information on Hovering over the point. Right now onHover as mentioned in docs is not working to get the point. This is my jsFiddle.

Foulmouthed

It's only a typo: you wrote onhover instead of onHover – Stephie

@Stephie i noticed this is working in v2.7 but i am using 2.6. Other thing is it is alerting on the axis like not on the point but if i drag mouse on the chart. Can you please help me in this regard – Foulmouthed

Answer 1

In previous versions of Chart.js (for example 2.6) the onHover handler has to be configured as below:

  hover: { 
     onHover: function(evt, item) { 
        if (item.length) {
            console.log("onHover", item, evt.type);
            console.log(">data", item[0]._index, data.datasets[0].data[item[0]._index]);
        }
     }
  },

itme[0]._index property points to data of target item

So your fiddle (chart.js 2.6) updated is: https://jsfiddle.net/beaver71/440L5661/

With chart.js 2.7: https://jsfiddle.net/beaver71/ttrak7sj/

Stephie

oh now i understand but how can i get that point information like the data which is being shown on the tooltip. actually i am overriding the tootltip . – Foulmouthed

there is a _index property for item hovered, so data item is data.datasets[0].data[item[0]._index]. fiddle updated – Stephie

let me check this please. – Foulmouthed

How would this work if instead of just 1 dataset, the chart has 2 or more? How would you know over which point is the mouse over? – Salientian