How to customize Plotly Tooltip


#21

Hello,
I’m trying to implement a custom tooltip for a pie chart but there is no xaxis/yaxis properties in the ‘hover event data’. So no way to use l2p/d2p function or do I missed something? If not, I would like to know if there is another way to get an x/y coordinate where I can attach the tooltip?

Thanks in advance,
Cédric


#22

@pppw
I know this is an old thread, but it’s been immensely helpful to me, so I wanted to add this here for anyone that didn’t glean it from Manuel’s post above. Adding the ‘pointer-events: none;’ makes the tooltip “stable” like the default one.


#23

@Cedric I found a “hack” to get more detailed data for the hover:

            var addEventDataFn = function (chart) {
                $.each(chart._fullData, function(key, val) {
                    if (val._module.eventData) {
                        return true;
                    }
                    val._module.eventData = function eventData(out, pt, trace, cd, pointNumber) {
                        out = $.extend(out, pt);
                        return out;
                    };
                });
            };

Plotly.react(myGraphDiv).then(function () {
    addEventDataFn(myGraphDiv);
});

(Attention: It uses jQuery)

With this the data contains all the needed information to construct your own hover-effect.

Hope this code-snipped helps a lot of people out there. But beware: If the chart-type defines this function already and provides less data it can make problems, so this case is not reflected yet.