CODEWITHSUNDEEP
plotly
warship
warship

Reputation: 3024

plotly.js: "Show closest data on hover" & "Compare data on hover"?

Can anyone please tell me what exactly the "Show closest data on hover" & "Compare data on hover" buttons do and why they are useful? Please see the contour density plot drawn with plotly.js here: https://plot.ly/javascript/open-source-announcement/.

enter image description here

When I click those buttons in the top right corner of the plot, nothing happens for me. I've had a similar problem using these buttons from the R/Python APIs of plotly.js as well, so I'm either misusing them or they're meant to serve very specific use-cases.

Upvotes: 0

Views: 2530

Answers (1)

Maximilian Peters
Maximilian Peters

Reputation: 31649

There is no official documentation on it, so that's just what I observed.

  • "Show closest data on hover" shows the closest datapoint when hovering over a point on the plot, e.g when hovering over the green bar at position x 6 the following hover label appears

enter image description here - "Compare data on hover" shows all datapoints from all traces with identical x-values, e.g. hovering on any bar or marker at position x 5 highlights all other traces at the same position (and adds a label on the x-axis).

enter image description here

You can try it on the snippet below.

why they are useful?

Well, that's quite opinion based but sometimes it is useful to compare datapoints from different traces without the need to hover over all points, sometimes the hover just triggers a firework of labels when there are too many traces.

var traces = [
  {
    x: [1, 2, 3, 4],
    y: [10, 15, 13, 17],
    type: 'scatter'
  },
  {
    x: [2, 3, 4, 5],
    y: [1, 5, 3, 17],
    type: 'scatter'
  },{
    x: [5, 6],
    y: [3, 7],
    type: 'bar'
  }, 
  {
    x: [5, 6],
    y: [1, 5],
    type: 'bar'
  }
];

Plotly.newPlot(myDiv, traces);
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id='myDiv'></div>

Upvotes: 2

Related Questions