Implementing hover callback in Chart.js

Question

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!

Check this for an example on using onhover: https://stackoverflow.com/questions/48191984/chartjs-get-points-information-on-hovering-the-points/48194058#48194058 — beaver, Jan 18 '18 at 07: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, Jan 20 '18 at 02:40
@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, Jun 20 '19 at 07:59

score 2 · Answer 1 · edited Jan 15 '21 at 13:37

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);
                            }
                        }
                    }
                }
            });

Implementing hover callback in Chart.js

1 Answers1