Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Mouse position is wrong when style:zoom is applied on the plotly-graph-div #6169

Closed
LBrodersen opened this issue Apr 11, 2022 · 3 comments
Closed

Mouse position is wrong when style:zoom is applied on the plotly-graph-div #6169

LBrodersen opened this issue Apr 11, 2022 · 3 comments

Comments

@LBrodersen
Copy link

LBrodersen commented Apr 11, 2022 •
edited
Loading

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:
https://codepen.io/lbrodersen/pen/XWVBXob

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:
2022-04-11 16_01_40-Zoom problem_edit
@LBrodersen
Copy link
Author

As you can see above, I'm using the latest version:

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

The code itself at the codepen example was also generated with the latest version (5.7.0)

The bug I'm describing is not limited to a specific combination of packages. It occurs whenever plotly grapgh are zoomed. The part <div style="zoom: 1.x;"> is just to make it easier to debug. It might be the result of a varity of styling and layout options.

If you need any more information or if I can assist in the debugg, just let me know.

I've posted the same issue at the plotly community: https://community.plotly.com/t/mouse-position-is-wrong-when-style-zoom-is-applied-on-the-plotly-graph-div/62932

@archmoj
Copy link
Contributor

archmoj commented Apr 25, 2022

As you can see above, I'm using the latest version:

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

Please note that the above loads last v1 not v2.
To load latest v2 at the moment you could use <script src="https://cdn.plot.ly/plotly-2.11.1.min.js"></script>.

Regarding zoom, it is a non-standard feature.
See https://developer.mozilla.org/en-US/docs/Web/CSS/zoom
Alternatively one could use scale.
Here is a demo.

@LBrodersen LBrodersen mentioned this issue May 13, 2022
Closed
@cderv cderv mentioned this issue Sep 14, 2022
Closed
4 tasks
@gvwilson
Copy link
Contributor

gvwilson commented Jul 3, 2024

Hi - we are trying to tidy up the stale issues and PRs in Plotly's public repositories so that we can focus on things that are still important to our community. Since this one has been sitting for several years, I'm going to close it; if it is still a concern, please add a comment letting us know what recent version of our software you've checked it with so that I can reopen it and add it to our backlog. Thanks for your help - @gvwilson

@gvwilson gvwilson closed this as completed Jul 3, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@gvwilson @archmoj @LBrodersen