I'm facing issues to properly position a custom tooltip on a Plotly.js heatmap.

I'm using the l2p method (what's this acronym standing for?) in bination 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 by using external divs as tooltip area is that they are located pletely 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 someone point me to some documentation or demo on how to do that "the plotly way" esp. for the heatmap?

I'm facing issues to properly position a custom tooltip on a Plotly.js heatmap.

I'm using the l2p method (what's this acronym standing for?) in bination 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 by using external divs as tooltip area is that they are located pletely 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 someone point me to some documentation or demo on how to do that "the plotly way" esp. for the heatmap?

• javascript
• heatmap
• plotly

2 Answers 2

One of the core developers of Plotly answered me to this question that the way I calculate the position is currently the best way of doing it and thus this issue can be closed.

You could use Javascript's pageX and pageY functions and bine them the with Plotly's hover event.

You can get the cursor position in absolute pixels and use it directly. In the snippet below a dot is moving together with the cursor when the mouse is above the Plotly div. Its size and color are determined by the data over which the cursor is located.

Of course you can bind the onmousemove event to any part of the plot as well and make something more sophisticated than just a dot.

//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's 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>