Bring Drag & Drop to Dash with Dashboard Engine. 💫 Learn how at our next webinar!

Overlapping subplots problem - SOLVED

In my Dash app I have a subplot with two rows, one column, and a shared x axis. The problem is that the rows overlap - for some reason the y1 axis extends behind the y2 axis. The code and a screenshot are shown below.

trace_T2 = go.Scatter(
    x=df.T2_x,
    y=df.T2_y,
    mode='lines+markers',
    marker=dict(color=steelblue, size=6,
        line=dict(
            color='rgb(0, 0, 0)',
            width=0.5)
    ),
    line=dict(width=1, color='rgb(0, 0, 0)'),
    hoverinfo='all',
    text=df.id_data,
    showlegend=True,
    name='T2'
)

trace_T2_lim95 = go.Scatter(...)

trace_T2_lim99 = go.Scatter(...)

trace_SPEx = go.Scatter(...)

trace_SPEx_lim95 = go.Scatter(...)

trace_SPEx_lim99 = go.Scatter(...)

# Collect all the data into list
traces = [trace_T2, trace_T2_lim95, trace_T2_lim99, trace_SPEx, trace_SPEx_lim95, trace_SPEx_lim99]

layout = go.Layout(
    title='MV Control Charts',
    xaxis=dict(
        title='Assembly Start Date',
        rangeselector=dict(
            buttons=list([
                dict(count=1,
                     label='1m',
                     step='month',
                     stepmode='backward'),
                dict(count=6,
                     label='6m',
                     step='month',
                     stepmode='backward'),
                dict(count=1,
                     label='YTD',
                     step='year',
                     stepmode='todate'),
                dict(count=1,
                     label='1y',
                     step='year',
                     stepmode='backward'),
                dict(step='all')
            ])
        ),
        rangeslider=dict(),
        type='date'
    ),        
    yaxis=dict(title='T2'),
    yaxis2=dict(title='SPEx'),
    height=600
)

fig = tools.make_subplots(rows=2, cols=1, specs=[[{}], [{}]], shared_xaxes=True)
fig.append_trace(trace_T2, 1, 1)
fig.append_trace(trace_T2_lim95, 1, 1)
fig.append_trace(trace_T2_lim99, 1, 1)

fig.append_trace(trace_SPEx, 2, 1)
fig.append_trace(trace_SPEx_lim95, 2, 1)
fig.append_trace(trace_SPEx_lim99, 2, 1)
fig['layout'].update(layout)

Edit:
Solved it by taking the y axes titles out of Layout() and using

fig['layout']['yaxis1'].update(title='T2')
fig['layout']['yaxis2'].update(title='SPEx')
2 Likes

As I explained in https://community.plotly.com/t/rangeslider-overlaps-with-subplots/35169/3.

To remove the first slider for the fig.

fig.update_layout(xaxis_rangeslider_visible=False)

Any subsequent calls for with fig.update_layout(xaxis_rangeslider_visible=False) will have no effect.
To remove the rangeslider for each subsequent trace, you have to refer to them by their row and col.

fig.update_xaxes(rangeslider= {'visible':False}, row=2, col=1)
fig.update_xaxes(rangeslider= {'visible':False}, row=3, col=1)