I'm trying to implement a hover callback in the chart I made using Chartjs. Here's the part below I'm confused:

var chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        // Am I supposed to put onHover callback inside of hover property of options?
        //hover: {
        //    onHover: (e, elements): void => {}
        //}
        // OR
        // Am I supposed to put onHover callback just as a property of options?
        // onHover: (e, elements): void => {}
    }
});

The tricky part is that I've tried the both approach and it works in either way. I've been sniffing around their docs but I seem to not get the right approach. According to their docs, onHover: Called when any of the events fire. Called in the context of the chart and passed the event and an array of active elements (bars, points, etc). Shouldn't it be called when only hover event fires? Any insight would be appreciated!

I'm trying to implement a hover callback in the chart I made using Chartjs. Here's the part below I'm confused:

var chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        // Am I supposed to put onHover callback inside of hover property of options?
        //hover: {
        //    onHover: (e, elements): void => {}
        //}
        // OR
        // Am I supposed to put onHover callback just as a property of options?
        // onHover: (e, elements): void => {}
    }
});

The tricky part is that I've tried the both approach and it works in either way. I've been sniffing around their docs but I seem to not get the right approach. According to their docs, onHover: Called when any of the events fire. Called in the context of the chart and passed the event and an array of active elements (bars, points, etc). Shouldn't it be called when only hover event fires? Any insight would be appreciated!

• javascript
• charts
• hover
• chart.js

Share Improve this question Follow asked Jan 18, 2018 at 2:26 DongBin KimDongBin Kim 1,88977 gold badges2828 silver badges4545 bronze badges 5

• 1 Check this for an example on using onhover: stackoverflow./questions/48191984/… – beaver Commented Jan 18, 2018 at 7:34
• @beaver Thanks! I managed to hook the hover. One question: Say, there are two charts drawn by Chartjs. The feature I'd like to implement is that if I hover on the either of charts, the tooltip would show up on the both charts as if I hover on the both. Since tooltips show up depending on the mouse point, at first I tried to trigger the manual mousemove/mousemove event by using dispathEvent but it didn't work. And then, I tried to open tooltips programmatically, it didn't work either. How would I implement it? – DongBin Kim Commented Jan 20, 2018 at 2:40
• I nailed it! Thanks :D – DongBin Kim Commented Jan 22, 2018 at 9:57
• how? maybe add it as an answer. thanks – theprogrammer Commented Jun 20, 2019 at 2:41
• 1 @theprogrammer if you are asking how I implemented it, I dispatched a notification and made other charts subscribe to it and then show the tooltip programmatically. My project is rxjs based FYI. – DongBin Kim Commented Jun 20, 2019 at 7:59

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

You should implement the onHover callback inside the hover options so you can specify your options. The event hover is fire for every other event because they have a hover in them, i.e. the event click, has a hover and then a click.

var chart = new Chart(document.getElementById('chart').getContext('2d'), {
  options: {
    hover: {
      mode: 'nearest',
      intersect: false,
      onHover: function (e, item) {
        if (item.length) {
          const data = item[0]._chart.config.data.datasets[0].data[item[0]._index];
          console.log(item, data);
        }
      }
    }
  }
});