How can I get exact x / y pixel coordinates of a marker / point?

Hi!

Right now, I’m struggling to convert the x and y axis position from a marker on a scatter graph to pixel position relative to the graph. My goal is to add an html element outside of the graph, and position it exactly above the point.

I checked this forum thread here: How to customize Plotly Tooltip. There, I found about the `l2p()` function, which seems to help a lot. The returned x/y pixel coordinate seems to be on the right path, but there’s a huge offset between the returned coordinate and the real coordinate of the point on the screen. Here’s a quick demo: http://codepen.io/diegoliv/pen/NdWKWj (check the position of the red dot on the screen, it always has the same offset for both x / y axis).

I tried this code with several data sources, and seems that the offset varies for all of them.

So, I’m suspecting that the returned result from `l2p()` and similar functions (like `d2p()` are not relative to the root svg element, but is relative to something else.

How can we calculate this offset so we can use it to calculate the exact x/y pixel coordinates on the graph for the red dot? OR, is there any other better approaches to get these coordinates?

1 Like

Hi @diegoliv,

I only want to point you to a similar posting by me. I also want to know whether or not there is a predefined way how these coordinates should be calculated within Plotly. I can see that you’re also using the x/y axis offset properties. I’m also not sure that this is the best way of doing it. I hope we get some official answer on that soon.

Hi, @andi1984! Thanks, your post is exactly where I found out about the offset properties. I will do some research this week on the source code of `plotly.js`. Maybe if we find out how they are positioning the points / markers and other things like their own tooltips / annotations, we might figure out some way of doing the same with custom html elements outside the svg element. If my research have some success, I might even share my results (or even do a PR on the official repo).

1 Like

Hi @diegoliv!