Problems with mouse position hover subplots

Dash Python
1

Hello!

Last days I was developping a couple of subplots in my Dash app.
I had a problem when I try to see data with hoverinfo.
The data displayed is the desired one but it seems that the mouse position isn’t right.

As you can see in the gif, the mouse position seems to be out of place. I’m having a discrepance in both (x and y position) positions in almost every subplot.

I can see the top two of them.

Almost every scatter is like this one:

go.Scatter(x=new_df['realdate'],
           y=new_df['DCR_CS'],
           name=cell,
           legendgroup=cell,
           line={'color': 'rgb{}'.format(col)},                                               
           mode='lines',
           showlegend=True)

Excepts the showlegend that is false for every one of them except the first one (I want only one legend for all subplots).
My layout is:

# Constants for plots
LAYOUT = {'height': 900,
          'showlegend': True,
          'plot_bgcolor': 'white',
          'paper_bgcolor': 'white'}

subplots%20mouse%20position
subplots mouse position.gif1760×642 357 KB

Lots of Thanks!

2

Navingating over other posts I found something interesting that solved my problem.



https://codepen.io/anon/pen/ZXdYdb <- Example

People says that CSS Transfrom properties seems to mismatch the mouse hover x and y position.

In my dash, my layout was zoomed at 80% (the bigger div that contains the whole layout).

Changing this to 100% solved my problem. So beware with directly or indirectly resizing plotly plots.

2 Likes