I’ve come across a problem with the hover info and selection positioning when using style:zoom on a plotly-graph created with the full_html=False statement.
The style:zoom function is used for example on a reveal.js-presentation, where several plotly graphs are included as div-objects instead of iframes. Since I can reproduce it without any code from that project, I posted it here.
I’ve uploaded a minimal example her:
The graph itself is just the example scatter plot:
import plotly.express as px df = px.data.iris() # iris is a pandas DataFrame fig = px.scatter(df, x="sepal_width", y="sepal_length", color="species", size='sepal_length', hover_data=['petal_width']) fig.write_html(file="test_petal.html", full_html=False, include_plotlyjs=False ,default_width= "1200px", default_height="800px")
The outer div-element got the zoom, the rest is a minimal html file.
<html> <head> <meta charset="utf-8"> <title>Zoom problem</title> <script src="https://cdn.plot.ly/plotly-latest.min.js"></script> </head> <body> <div style="width: 1280px; height: 800px; zoom: 1.35754;"> <div id="xxx" class="plotly-graph-div js-plotly-plot" style="height:800px; width:1200px; ">... </div> </div> </body> </html>
The resulting offset is visible here:
Any idea on how to solve this? The only workaround I know so far is just not using zoom.
Thank in advance