Black Lives Matter. Please consider donating to Black Girls Code today.
Learn how to use COVID-19 data in open source Dash apps. Register for the Sept 23rd webinar with IQT!

Function to get Y-value related to any X-Value in hover event

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.)

So, you’re looking for the cursor position in data coordinates?

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.

Oh I see. Nice use case!

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!

@fhurta, @etienne, any updates on this?

This is my use-case, too. I’d like to get interpolated values on mousehover regardless of x-points position.

I’d like to get interpolated values on mousehover regardless of x-points position