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

**URL:** <https://community.plotly.com/t/zoom-of-a-graph-does-not-work-after-updating-from-two-row-subplot-to-one-row-subplot/29795>\
**Category:** Dash Python\
**Created:** [October 9, 2019, 3:29pm UTC](https://community.plotly.com/t/zoom-of-a-graph-does-not-work-after-updating-from-two-row-subplot-to-one-row-subplot/29795 "2019-10-09T15:29:35Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![dberg](https://avatars.discourse-cdn.com/v4/letter/d/34f0e0/32.png) [@dberg](https://community.plotly.com/u/dberg)\
**Post date:** [October 9, 2019, 3:29pm UTC](https://community.plotly.com/t/zoom-of-a-graph-does-not-work-after-updating-from-two-row-subplot-to-one-row-subplot/29795/1 "2019-10-09T15:29:35Z")

</div>

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:

```auto
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.

---

<div class="post-metadata">

**Author:** ![konsti\_papa](https://avatars.discourse-cdn.com/v4/letter/k/9de053/32.png) [@konsti\_papa](https://community.plotly.com/u/konsti_papa)\
**Post date:** [October 10, 2019, 8:23am UTC](https://community.plotly.com/t/zoom-of-a-graph-does-not-work-after-updating-from-two-row-subplot-to-one-row-subplot/29795/2 "2019-10-10T08:23:04Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![jahn](https://avatars.discourse-cdn.com/v4/letter/j/dc4da7/32.png) [@jahn](https://community.plotly.com/u/jahn)\
**Post date:** [October 10, 2019, 10:57am UTC](https://community.plotly.com/t/zoom-of-a-graph-does-not-work-after-updating-from-two-row-subplot-to-one-row-subplot/29795/3 "2019-10-10T10:57:06Z")

</div>

this is a very weird bug… cant solve it too

---

<div class="post-metadata">

**Author:** ![berger](https://avatars.discourse-cdn.com/v4/letter/b/898d66/32.png) [@berger](https://community.plotly.com/u/berger)\
**Post date:** [April 2, 2020, 10:25pm UTC](https://community.plotly.com/t/zoom-of-a-graph-does-not-work-after-updating-from-two-row-subplot-to-one-row-subplot/29795/4 "2020-04-02T22:25:16Z")

</div>

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:

```auto
@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

```