Black Lives Matter. Please consider donating to Black Girls Code today.
Dash HoloViews is now available! Check out the docs.

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!
Any updates on your findings?
I am currently working on this and needed to get the pixel coordinate within the graph frame!

NVM found this!