Zoom of a graph does not work after updating from two row subplot to one row subplot

Dash Python
1

Hello all,

I am working on a small dashboard that displays data in a subplot. If the first data is chosen, it is possible to zoom and move the plot.
After selecting a second data, such that the subplot consists of two rows it is still possible to zoom.
But after deselecting the second row, the first plot appears again but it is not possible to zoom anymore.

I have created a small example:

import numpy as np
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

import plotly
import plotly.graph_objects as go

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

styles = {
    'pre': {
        'border': 'thin lightgrey solid',
        'overflowX': 'scroll'
    }
}

plot_data_options=[{'label': '1', 'value': 'bla'},
                   {'label': '2', 'value': 'bla2'},
                   {'label': '3', 'value':'bla3'}]

app.layout = html.Div([
    #Header and howto

    html.Div([    
        html.P([    
            html.Label("Data to plot"),    
            dcc.Dropdown(
                id = 'dropdown_plot_data',
                options=plot_data_options,
                multi=True,
                value=[]
            )]
            ,style={'width': '60%', 'display': 'inline-block'}
        )]
    ),
             
    html.Div(   
        dcc.Graph(
            id='basic-interactions',
            figure={
                'data': [{
                        'x': np.random.rand(10),
                        'y': np.random.rand(10)
                    }]
            }
        )
    )
])

# callback to change the data of the plot
@app.callback(Output(component_id='basic-interactions',component_property= 'figure'),
     [Input(component_id='dropdown_plot_data', component_property='value')]
     )
def update_temp_plot(plot_data):
    if len(plot_data)==0:
        plot_data=[1]
    n_plots=len(plot_data)

    fig = plotly.subplots.make_subplots(rows=n_plots, 
                        cols=1, 
                        shared_xaxes=True, 
                        vertical_spacing=0.02)
    count=0
    for k in np.arange(0,n_plots):
        fig.add_trace(go.Scatter(x=np.random.rand(10),
                                 y=np.random.rand(10)),row=count+1, col=1)
        count=count+1
    return fig



if __name__ == '__main__':
    app.run_server(debug=True)

If I set shared_xaxes=False it works but unfortunately I need shared x-axes.
Hopefully one of you has an idea how to solve this issue.

3 Likes
2

Interisting…

I tried to replace the dcc.Graph in the div and even that didn’t do anything…
Maybe there are some inner states preserverd in JS?

1 Like
3

this is a very weird bug… cant solve it too

4

Hello dberg, I was with the same problem…

I solved it controlling the height of the subplots through row_heights parameter. So, you ‘‘hide’’ the second row and the zoom dont stop work.
For example:

@app.callback(Output(component_id='basic-interactions',component_property= 'figure'),
     [Input(component_id='dropdown_plot_data', component_property='value')]
     )
def update_temp_plot(plot_data):
    row_heights = [1, 0]
    n_plots = 1
    if len(plot_data)>=0:
        n_plots = 2
        row_heights = [0.5, 0.5]

    fig = plotly.subplots.make_subplots(
                        rows=2, 
                        cols=1, 
                        shared_xaxes=True, 
                        vertical_spacing=0.02,
                        row_heights=row_heights
    )

    count=0
    for k in np.arange(0,n_plots):
        fig.add_trace(go.Scatter(x=np.random.rand(10),
                                 y=np.random.rand(10)),row=count+1, col=1)
        count=count+1
    return fig