Plotly hover popup location misalignment issue after applying css trascform scale

Due to a specific requirement of fitting multiple charts which are added dynamically and arranged horizontally in available viewport without scroll I am using transform scale for example transform: translateZ(0) scale(0.50, 0.50) on charts based on available space, although the whole chart is scaled down uniformly but when mouse hover over is done on chart I observe there is offset between mouse location and hover popup location shown in attached screen shot


Using resize() or relayout does not give crisp chats when they are scale down due to uneven transform of chart and labels.


I have created code pen to explain issue



I am facing same kind of issue, when I Hover over the plotly bar graph it’s misaligned in a way where I Hover my cursor somewhere near third horizontal bar I am getting values for my first bar, if i move my cursor a little down I am getting values for 2nd bar, whereas it suppose to give the Hoverinfo while we Hover over on the respective bar graph like when I keep my cursor on first bar it has to display Hoverinfo of first bar and so on…, but that’s not happening, seems like misalignment issue.

Happens only on chrome, same result works fine on Firefox.

Please suggest me some fix…

I am facing the same issue.

Did you guys manage to find a way to fix this issue?

Retro Steps:

All right, let me leave a comment here for anyone who runs into the same issue.

Instead of using scale: 0.5;, use transform: scale(0.5);

More details here Downscale all components to 75% - #2 by chriddyp

1 Like