Chart.js: horizontalBar: Show tooltip when label is hovered, not the bar

[keithpickering]

I have truncated labels for my horizontal bar graph, and I have the tooltips set up to give the full label value. However, the tooltips only show up when the bar itself is hovered. Is there a way to listen for hover events on the label itself, and show the tooltip when the label is hovered instead of the bar?

[etimberg]

@keithpickering I think you could do this with a plugin that listened to events and then checked to see if the event location was over an axis. If so, it would use the axis.getValueForPixel to see which value you are over. On the category axis (the default bar X axis) this should give you which label you are over. Then you could trigger the hover and tooltip, but it may get complicated.

It might actually be easier to build this into the core somehow. I'm happy to look at any PRs for this

[keithpickering]

Thanks for the reply. How would the hover/tooltip be triggered?

[etimberg]

I would follow the code in https://github.com/chartjs/Chart.js/blob/master/src/core/core.controller.js#L796 for the hovering and try and do something similar. For the tooltip, I think you can follow https://github.com/chartjs/Chart.js/blob/master/src/core/core.tooltip.js#L821-L860 (might even be as simple as calling handleEvent)

[keithpickering]

I've figured out how to display tooltips programmatically - but I'm having trouble with checking to see if an event location is over an axis. Is there a built in method for this?

[etimberg]

to get the items under the event position you can look at https://github.com/chartjs/Chart.js/blob/master/src/core/core.interaction.js#L216-L219

I think you can just call Chart.interaction.modes.point(chart, event); to get the items under the event position.

[keithpickering]

Hmm...Chart.interaction is undefined. Can you think of why that might be?

EDIT: Ah, I see, it's supposed to be Chart.Interaction

[keithpickering]

I'm getting closer, but unfortunately Chart.interaction.modes.point(chart, event); doesn't count labels (only the bars themselves). Any way to change this?

[keithpickering]

Okay, I got it working relatively well. If anyone else needs this, here's how I did it (no plugin)

$(canvas).on('mousemove', function (event) {
    var itemsUnder = Chart.Interaction.modes.y(chart, event, { intersect: false });
    if (itemsUnder.length) openTip(chart, 0, itemsUnder[0]._index);
});

function openTip(oChart, datasetIndex, pointIndex) {
    if (oChart.tooltip._active == undefined)
        oChart.tooltip._active = []
    var activeElements = oChart.tooltip._active;
    var requestedElem = oChart.getDatasetMeta(datasetIndex).data[pointIndex];
    for (var i = 0; i < activeElements.length; i++) {
        if (requestedElem._index == activeElements[i]._index)
            return;
    }
    activeElements.push(requestedElem);
    oChart.tooltip._active = activeElements;
    oChart.tooltip.update(true);
    oChart.draw();
}

Found the openTip function in someone's jsfiddle. Basically, this will show the tooltip when you hover anywhere in the row, which might be good enough.

[etimberg]

Closing since it seems like there is a decent solution

[mysuf]

@etimberg I looked at available modes and there is 'y' mode. I would expect that this handler shows nearest tooltip on row basis(which fits for horizontalBar), but it doesn't work.

Edit: Argh. Got it. Missed "Note that this only applies to cartesian charts.". So custom mode.

[kurkle]

https://codepen.io/kurkle/pen/ZEEmXyd?editors=1010

[mysuf]

@kurkle So its combination of settings that makes it work. Thank you!