Plotly.fx.hover and histograms

plotly.js
1

Hello,
For scatter traces when I use Plotly.Fx.hover method I pass in an array of:
{ curveNumber, pointNumber }

where curvNumber is the index into Plotly.data for trace, and pointNumber is the index into the xy data. The pointNumber is then used by plotly to look up the hovertext from the trace.text array.

If I try the same with a histogram (auto bins), it seems to treat the pointNumber as the bin index.
CodePen https://codepen.io/greg9504/pen/NWKzVeJ

OK I now see that’s what the docs say here https://plot.ly/javascript/reference/#histogram-text. I do understand why you would want to limit each bin to one text. However

Given:
x = [1, 2, 3, 3, 3, 3, 4, 5]
text = [“one”, “two”, “three1”, “three2”, “three3”, “three4”, “four”, “five”]

I would expect when hovering over the 5 bin to see “five” instead I see “three3”. For index 2 through 5 I would expect to see the threeN text values. This visualizes that the point is in the bin. Given I’m passing a “pointNumber” into Fx.hover. If I were passing in something like { curveNumber, binNumber } then I would expect the behaviour I’m seeing in plotly.

So my question - Is there a way to retrieve the bins, so I can figure out what bin a point is in? I need a way to programmically hover the bin based on the either the point index or the xval.

Thanks.
Greg.

2

You can try digging into:

var gd = document.getElementById(/* id of your graph */)

gd.caldata[0] // => this is an array, each items corresponds to a bin on the graph

gd.calcata[0].forEach(d => {
   d.pts // => this is an array, it contains the corresponding indices of pts
             //      in the x/y sample arrays you input
})