Tool tip on wrong dot in scattergl

plotly.js
1

I’m trying to plot using scattergl, but when I’m hover a point show the tooltip of another. Here the following code:

<!DOCTYPE html>
<html>
<head>
<!-- Plotly.js -->
<meta charset="UTF-8" />
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

</head>
<body>
<!-- Plotly chart will be drawn inside this DIV -->
<div id="myDiv" style="width:100%;height:100%"></div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
var trace1 = {
  x: [1, 2, 3, 4, 5, 1, 6, 3, 6, 1, 5],
  y: [1, 6, 3, 6, 1, 2, 2, 3, 4, 5, 11],
  mode: 'markers+text',
  hoverinfo	:	'x+y+text+name',
  type: 'scattergl',
  name: 'Team A',
  showlegend: false,
  text: ["A", "A", "A", "A", "A", "A", "A", "A", "A", "A", "A"],
  textposition: 'top center',
  textfont:
  {
    family:  'Raleway, sans-serif'
  },
  marker:
  {
    size: 12,
    color: [10, 100, 5, 11, 6, 10, 50, 8, 9, 10, 11],
    colorscale: [[0, "#a50026"], [0.1, "#d73027"], [0.2, "#f46d43"], [0.3, "#fdae61"],
                  [0.4, "#fee08b"], [0.5, "#ffffbf"], [0.6, "#d9ef8b"], [0.7, "#a6d96a"],
                  [0.8, "#66bd63"], [0.9, "#1a9850"], [1, "#006837"]],
    reversescale: true,
    showscale: true,
  }
};

var data = [ trace1];

var layout = {
  legend: {
    y: 0.5,
    yref: 'paper',
    font: {
      family: 'Arial, sans-serif',
      size: 20,
      color: 'grey',
    }
  },
  title:'Data Labels on the Plot'
};

Plotly.newPlot('myDiv', data, layout);
</script>
</body>
</html>

This only happens when they are the same point in x. Here a printscreen to show what I’m saying:

hoverproblem2
hoverproblem2.png1832×648 20.2 KB

2

The problem happens only when I try to compare on hover

3

The same happens using SVG scatter https://codepen.io/etpinard/pen/xyLgmw?editors=1010

At the moment, layout.hovermode: 'x' picks all the points across all traces with same or similar ‘x’ coordinates and then shows a hover label for the “first” point (as determined by its position the input data array) in each trace.

Arguably, we should a hover label for the “closest” from the cursor point in each trace. This would be a nice addition to the library. Thanks for bringing this up.

1 Like
4

In the meantime, I suggest using layout.hovermode: 'closest', which should behave as you desire.