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