How to customize Plotly Tooltip

Hi @etienne,

I’ve a similar use case like @nithyaranim, but this time within a heatmap.

I’m using the l2p (what’s this acronym standing for?) in combination with the pointNumber data to get a relative positioning within the heatmap. It looks like:

x: point.xaxis.l2p(point.pointNumber[1]),
y: point.yaxis.l2p(point.pointNumber[0])

But the problem with that is that it is relative to the top/left origin of the heatmap svg itself without the outer x- and y-axis labels, so I’m actually missing that part and wonder about whether there isn’t a built-in functionality to get this positioning information directly? The problem is that using external divs as tooltip area that they are located completely outside of the chart and with that I need the information with reference to the top/left origin outside of the chart and the axis labeling.

What seems to work is to use the axis private _offset property and add it to the x and y positions above, so I get

x: point.xaxis.l2p(point.pointNumber[1]) + point.xaxis._offset,
y: point.yaxis.l2p(point.pointNumber[0]) + point.yaxis._offset

But that looks quite nasty to me. Can you point me to some documentation or demo on how to do that “the plotly way” esp. for the heatmap?

Thx in advance,

Andreas

1 Like