I use plotly.js to draw time series. I’m trying to get Y-value for any given hover X-position (in hover event). I can get the value if I’m at the data point (or near enough) but I would need to get the value even in zoomed-in view when the data points are far away each other and the hover X-position is in between them.
Is there a function to achieve this? (The value should be interpolated for linear data, ideally corresponding to the line drawn. For stepped data it should be obviously the last state value at given time.)
Actually, i want to use x position of the cursor to get y positions of all graphs for this exact x (let’s call it Cx). In hover event I can take the Cx from xvals (if there are e.g. 3 graph lines, all values in xvals array are the same). In points, however, are only data points, i.e. points where the point for x value is defined in trace, with some distance tolerance so the x of these datapoints could be a bit different from Cx - see this codepen and compare xvals and points.x for each graph.
I’m looking for a function, which gets y values (possibly interpolated) for current Cx from all graph lines.
Unfortunately, that’s a little outside the scope of what plotly.js can do. Our hover data is all data-point based (as given by the input x and y arrays) as opposed to being visual-element (e.g. rendered lines) like you’re looking for.
You’ll have to write up your own distance-from-a-point-to-a-line routine. There must be some library out there that can help you out. Let me how that goes!
I added calculation of y-values for other graphs (as linear interpolation of neighbor data points) - see here. Anyway, it’s just half way to my goal. I would like to have continuous hover regardless current zoom level and real data point. I would need to hook to mousemove event rather then hoover event and get the cursor position in data coordinates. Any tips where to start? Thanks!