Interesting Figure Size Instability in HTML Plots

[pjmhall]

Hi all,

I would really appreciate some help on this one as it is driving me nuts. I have been creating some interactive plots using plotly.offline and buttonmenus. In several cases, when setting axis properties it has made the plots unstable. When the code is executed and the figure displays, it is an unusual size. Clicking on the legend/a button menu/some zoom controls causes the figure to change position and size cyclically. This makes the end plots very difficult to use.

I have discovered this bug several times through different routes and therefore have a feeling maybe there is something special I am doing to cause it. Having said this, it is definitely not something that should be possible to cause through the kind of settings I am using. Here is a much reduced version of my code that replicates the behaviour. The attached .zip file also contains an .html file that shows the behaviour.

Please note this behaviour is not exclusively limited to violin plots. I can make it happen in almost any plot type. I think it's quite an interesting problem to be looking into. I will buy a beer for anyone who can fix it for me!

import numpy as np
import plotly.graph_objects as go
from plotly.offline import plot

x_data_1 = np.random.rand(50)*100
x_data_2 = np.random.rand(50)*100

fig = go.Figure()

for i, category in enumerate(['a', 'b', 'c', 'd']):
    fig.add_trace(go.Violin(y=i*np.ones(50),
                            x=x_data_1,
                            legendgroup=category, scalegroup=category, name=category+'1', showlegend=True,
                            side='negative',
                            line_color='rgb(255,0,0)',
                            line_width=2, visible=True, points='suspectedoutliers', orientation='h',
                            fillcolor='rgba(255,0,0,0.4)')
                  )
    fig.add_trace(go.Violin(y=i*np.ones(50),
                            x=x_data_2,
                            legendgroup=category, scalegroup=category, name=category+'2', showlegend=True,
                            side='positive',
                            line_color='rgb(255,0,0)',
                            line_width=2, visible=True, points='suspectedoutliers', orientation='h',
                            fillcolor='rgba(255,0,0,0.4)')
                  )
    fig.add_trace(go.Violin(y=i*np.ones(50),
                            x=x_data_1*2,
                            legendgroup=category, scalegroup=category, name=category+'1', showlegend=True,
                            side='negative',
                            line_color='rgb(255,255,0)',
                            line_width=2, visible=False, points='suspectedoutliers', orientation='h',
                            fillcolor='rgba(255,255,0,0.4)')
                  )
    fig.add_trace(go.Violin(y=i*np.ones(50),
                            x=x_data_2*2,
                            legendgroup=category, scalegroup=category, name=category, showlegend=True,
                            side='positive',
                            line_color='rgb(255,255,0)',
                            line_width=2, visible=False, points='suspectedoutliers', orientation='h',
                            fillcolor='rgba(255,255,0,0.4)')
                  )

fig.update_traces(meanline_visible=True)
fig.update_layout(violingap=0, violinmode='overlay')

fig.update_layout(
    updatemenus=[
        go.layout.Updatemenu(
            type="buttons",
            buttons=[
                dict(label='Data 1',
                     method="update",
                     args=[{"visible": 4*[True, True, False, False]}]),
                dict(label='Data 2',
                     method="update",
                     args=[{"visible": 4*[False, False, True, True]}]),
                dict(label='All',
                     method="update",
                     args=[{"visible": 4*[True, True, True, True]}])
            ],
        )],
    plot_bgcolor='rgba(0,0,0,0)')  # Set title

fig.update_yaxes(showline=True, linewidth=2, linecolor='black', mirror=True,
                 showgrid=True, gridwidth=1, gridcolor='black', range=[4, -1], tickvals=np.linspace(4, -1, 6),
                 ticktext=[''] + ['d', 'c', 'b', 'a'] + [''])
fig.update_xaxes(showline=True, linewidth=2, linecolor='black', mirror=True,
                 showgrid=True, gridwidth=0.5, gridcolor='rgba(100,100,100,0.2)', nticks=20,
                 range=[0, 100])

plot(fig, include_plotlyjs=True, filename=r'C:\Resize_Bug.html')

Resize_Bug.zip

[slishak]

Seems related to plotly/plotly.js#2704. A workaround is to add automargin=False to the update_xaxes and update_yaxes calls.

[pjmhall]

Yes that does seem to be the case. Thanks very much. I will close this issue as it doesn't belong in plotly.py and appears to be under consideration in plotly.js