Hover event for chart data?

[WyattKampel]

I have my own tooltip system setup. They are divs that position absolutely on the screen. I'd like to use them with the chart because they can overflow the canvas without cutting off.

Is there some way I can detect when a user hovers data (such as a piece of the pie chart)? I would then like to get the data's position so I can position my custom tooltip absolutely.

I realize this is a support question, not a bug. Sorry about that. Not sure where to ask this!

Thanks.

[etimberg]

@frog8fly I have good news on this front. You should be able to do this more easily in v22.5 (soon to be released). We made some changes to allow plugins to receive events (mousemove, click, etc).

What you could do is try the latest version from master and write a plugin that responds to events to trigger your tooltips. I've written the plugin at the bottom assuming that #3819 is merged so you might want to build from that PR.

Chart.plugins.register({
  afterEvent: function(chart, e) {
    // e.x and e.y is the event in the internal coordinates
    // e.type is the type of the event, translated into an internal touch agnostic type. You can probably use 'mousemove'
    // e.native is the original event
    // to look up the elements at the event position, you could use https://github.com/chartjs/Chart.js/blob/master/src/core/core.controller.js#L472 and pass in the hover options to see what the user is hovering.
    // You could also look at the Chart.active array (hovered items are here) but I don't think there is any guarantee that that would exist in future versions, ie it's a non public undocumented property.
  }
});

[WyattKampel]

@etimberg I copied the core.legend.js code into a file (I removed the module.exports line, but kept the code in between). Then I included the file in HTML and added your above code with an alert inside of it.

Nothing is alerting when I hover over my bar/pie chart's data. I'm obviously doing something wrong :\

[etimberg]

did you build the latest version from main? the afterEvent plugin call is new since the last release. Also, the legend should not need to be copied

[WyattKampel]

@etimberg I'm not sure what you mean by build the latest version from main. I downloaded chart.min.js about a month ago if that helps.

[etimberg]

To use what I posted you need to clone github and then follow the build instructions to make a build. Alternatively you can wait to v2.5 to be released

[WyattKampel]

Oh. I will give it a try. When are you planning on releasing v2.5? Thanks for your help, I appreciate it!

[etimberg]

2.5 should be released soon ... the PR to release it is #3840

[etimberg]

Closing since 2.5 has released and allows writing a plugin to do this