Custom tooltip positioning

Question

I ran into problems in order to correctly position the custom tooltip on the Plotly.js heatmap.

I use the l2p method (why is this acronym worth it?) In combination with pointNumber data to get relative positioning in the heatmap. It looks like this:

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

But the problem is that it refers to the top / left pole of the svg heatmap itself without external labels x and y, so I really skip this part and wonder if there is built-in functionality to get this location information directly? The problem with using external divs as a tooltip area is that they are completely outside the chart, and for this purpose I need information with reference to the top / left beginning outside the chart and the axis designation.

Which seems to work to use the private private _offset property and add it at 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 it looks pretty unpleasant to me. Can someone point me to some kind of documentation or demo on how to do this? for heat map?

Answer 1

One of the main Plotly developers answered this question to me that the way I calculate the position is currently the best way to do this and therefore this problem can be closed.

Answer 2

You can use Javascript pageX and pageY and combine them with the Plotly hover event.

You can get the cursor position in absolute pixels and use it directly. In the fragment below the point, it moves with the cursor when the mouse is over the Plotly div . Its size and color are determined by the data above which the cursor is located.

Of course, you can attach an onmousemove event to any part of the plot and do something more complex than just a point.

 //create some random data var data = [{z: [], type: 'heatmap'}]; var z = []; for (var i = 0; i < 10; i += 1) { z = []; for (var j = 0; j < 10; j += 1) { z.push(Math.random()); } data[0].z.push(z); } var myPlot = document.getElementById('myDiv'); var myPoint = document.getElementById('myPoint'); var colors = Plotly.d3.scale.category20(); //move the red dot myPlot.onmousemove = function(event) { myPoint.style.left = event.pageX + "px"; myPoint.style.top = event.pageY + "px"; } myPlot.onmouseleave = function() { myPoint.style.left = "-999px"; myPoint.style.top = "-999px"; } //create the plot Plotly.newPlot('myDiv', data); //use Plotly hover event to get the data myPlot.on('plotly_hover', function(data){ myPoint.style.border = "solid " + (2 + (data.points[0].z * 5)) +"px " + colors(Math.abs(1 - data.points[0].z)); }); 

 <script src="https://cdn.plot.ly/plotly-latest.min.js"></script> <div id='myDiv'> </div> <div id="myPoint" style="top: -999px; left: -999px; border: 5px solid #ff0000; border-radius: 50%; position: absolute; z-index: 999;"> </div>