Skip to content

Interesting Figure Size Instability in HTML Plots #2851

Closed
@pjmhall

Description

@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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions