Chart.js: Show tooltips programmatically

[RoxKilly]

v2.1.6

I know a lot of functionality is not yet documented, so I'm hoping one of you guys has figured out how to solve this problem. I have a bubble chart and below it a table in which each row corresponds to a bubble. I'd like the tooltip of the bubble to open when the user hovers over the table row, and to close when he exits. I can pass my Chart instance, dataset index and datapoint index to the event handler but I'm not sure what to do with them to open/close the tooltip

// this func is triggered by MouseEnter event
openTooltip(chart, datasetIndex, datapointIndex){
  ??? what goes here?
}

//this func is triggered by MouseLeave event
closeTooltip(chart, datasetIndex, datapointIndex){}

[RoxKilly]

Has there been any development on this with the new lib versions? Basically looking for a way to programmatically trigger the onHover event for a datapoint given its chart, datasetIndex and datapointIndex. Of course I also need to be able to end the onHover state.

Has no one faced this requirement and found a working solution?

[etimberg]

@RoxKilly I haven't really had a chance to look at this more indepth but I had a look now and I think with some refactoring in our code you can do this easily.

Refactoring in Core Controller

You would need to take https://github.com/chartjs/Chart.js/blob/master/src/core/core.controller.js#L610 and split it into 2 methods. The current event handler method and then take all of https://github.com/chartjs/Chart.js/blob/master/src/core/core.controller.js#L630-L682 and put it into a new function.

The modified eventHandler method would not store anything on me. Instead it would pass 'active' and 'tooltipActive' to the new function which would store them and then do the hover.

I imagine that the new method would look like setActiveElements(activeElements, tooltipElements). Both parameters would be arrays. I would be happy to merge this refactoring.

Determining Your Items to Pass to New Method

The second part of making this work is to lookup the items in the chart that you want displayed. These items are the points, bars, etc.

// gets you the meta data for a given dataset
// meta object interface defined here https://github.com/chartjs/Chart.js/blob/master/src/core/core.controller.js#L500-L508
let meta = chartInstance.getDatasetMeta(datasetIndex); 

// For a line chart, meta.data is an array of point objects. For a bar chart it is an array of rectangle objects.
let myActiveElements = [];

// For demo purposes we will hover every 2nd point
meta.data.forEach(function(point, i) {
  if (i % 2 === 0) {
    myActiveElements.push(point);
  }
});

// Call the refactored function. This will automatically unstyle old elements
chartInstance.setActiveElements(myActiveElements, []);

Clearing the Hover Style

Clearing the hover style is as simple as calling the new function with empty arrays

chartInstance.setActiveElements([], []);

[RoxKilly]

@etimberg Thanks for the tip. It's a bit overwhelming because I'm still just teaching myself how to program but it will keep me busy for a while. If I understand your basic recommendation, it requires that I modify the library, meaning edits would be lost on update right?

[etimberg]

Yes, but if you modify the source rather than the built file, you can submit a pr for the changes. That way we can merge it and then it will be available to everyone

[RoxKilly]

@etimberg I understand. Around the time I posted here, I also posted a Q on StackOverflow. User Raghav Tandon shared a solution that doesn't alter the library, but otherwise works for a specfic datapoint.

See this fiddle.

[etimberg]

@RoxKilly nice, that also works :smile:

[MatthewB19]

Why was this closed?

I think it'd be worthwhile to add the feature to the library itself.

[benzittlau]

I'm also curious why this was closed. It seems like this issue has been raised a number of times in our issues that were closed citing them as duplicates for this issue, but then this issue was also closed. Is there a way to do this now?

[benmccann]

Ok, I've reopened this as a feature request. It sounded like a specific user asking a question had their question answered, but since there's broader desire for this I'll leave it open. That being said, please note that the maintainers are all very busy, so it's up to the community to submit PRs for new features for the most part