Black Lives Matter. Please consider donating to Black Girls Code today.

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