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

**URL:** <https://community.plotly.com/t/function-to-get-y-value-related-to-any-x-value-in-hover-event/1956>\
**Category:** plotly.js\
**Created:** [August 24, 2016, 9:26am UTC](https://community.plotly.com/t/function-to-get-y-value-related-to-any-x-value-in-hover-event/1956 "2016-08-24T09:26:50Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![fhurta](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/fhurta/32/519_2.png) [@fhurta](https://community.plotly.com/u/fhurta)\
**Post date:** [August 24, 2016, 9:26am UTC](https://community.plotly.com/t/function-to-get-y-value-related-to-any-x-value-in-hover-event/1956/1 "2016-08-24T09:26:50Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![etienne](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/etienne/32/17_2.png) [@etienne](https://community.plotly.com/u/etienne)\
**Post date:** [August 24, 2016, 2:05pm UTC](https://community.plotly.com/t/function-to-get-y-value-related-to-any-x-value-in-hover-event/1956/2 "2016-08-24T14:05:54Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![fhurta](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/fhurta/32/519_2.png) [@fhurta](https://community.plotly.com/u/fhurta)\
**Post date:** [August 25, 2016, 8:58am UTC](https://community.plotly.com/t/function-to-get-y-value-related-to-any-x-value-in-hover-event/1956/3 "2016-08-25T08:58:59Z")

</div>

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](http://codepen.io/exavier/pen/kXKLVG) 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.

---

<div class="post-metadata">

**Author:** ![etienne](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/etienne/32/17_2.png) [@etienne](https://community.plotly.com/u/etienne)\
**Post date:** [August 25, 2016, 3:10pm UTC](https://community.plotly.com/t/function-to-get-y-value-related-to-any-x-value-in-hover-event/1956/4 "2016-08-25T15:10:03Z")

</div>

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](https://en.wikipedia.org/wiki/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!

---

<div class="post-metadata">

**Author:** ![fhurta](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/fhurta/32/519_2.png) [@fhurta](https://community.plotly.com/u/fhurta)\
**Post date:** [August 26, 2016, 4:39pm UTC](https://community.plotly.com/t/function-to-get-y-value-related-to-any-x-value-in-hover-event/1956/5 "2016-08-26T16:39:18Z")

</div>

I added calculation of y-values for other graphs (as linear interpolation of neighbor data points) - see [here](http://codepen.io/exavier/pen/wWLbQv/). 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!

---

<div class="post-metadata">

**Author:** ![pevik](https://avatars.discourse-cdn.com/v4/letter/p/a3d4f5/32.png) [@pevik](https://community.plotly.com/u/pevik)\
**Post date:** [July 31, 2017, 7:37am UTC](https://community.plotly.com/t/function-to-get-y-value-related-to-any-x-value-in-hover-event/1956/6 "2017-07-31T07:37:59Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![rjohnson42mns](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/rjohnson42mns/32/1515_2.png) [@rjohnson42mns](https://community.plotly.com/u/rjohnson42mns)\
**Post date:** [August 7, 2017, 2:12pm UTC](https://community.plotly.com/t/function-to-get-y-value-related-to-any-x-value-in-hover-event/1956/7 "2017-08-07T14:12:55Z")

</div>

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