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?