Black Lives Matter. Please consider donating to Black Girls Code today.
Dash HoloViews is now available! Check out the docs.

Tool tip on wrong dot in scattergl

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:

The problem happens only when I try to compare on hover

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

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