RangeSlider Overlaps with Subplots

📊 Plotly Python
1

Hi everyone,

I am trying to place a trend plot with a rangeslider as a subplot in a figure with other plots.
However I am having serious problems with the slider overlapping the other subplots.

I am using plotly for Python.

Here is a reproducible example:

import plotly.graph_objects as pgo
import numpy as np
import pandas as pd

layout = pgo.Layout(
    height=600,
    showlegend=False,
    hovermode='closest',
    title='Activity Overview',
    xaxis1=dict(
        domain=[0, 1],
        rangeslider=dict(
            visible=True
        ),
        type='date'
    ),

    xaxis2=dict(domain=[0, .33], tickangle=90),
    xaxis3=dict(domain=[.34, .66], tickangle=90),
    xaxis4=dict(domain=[.67, 1], tickangle=90),

    yaxis1=dict(domain=[.5, 1], automargin=True),
    yaxis2=dict(domain=[0, 0.4]),
    yaxis3=dict(domain=[0, 0.4]),
    yaxis4=dict(domain=[0, 0.4]),
)

traces = [
    pgo.Scatter(
        x=pd.date_range('2010-01-01', '2020-01-01'),
        y=np.random.rand(len(pd.date_range('2010-01-01', '2020-01-01'))),
        xaxis='x1', yaxis='y1',
        mode='lines', name='',
    ),
    pgo.Bar(
        xaxis='x2', yaxis='y2',
        x=np.arange(6),
        y=np.random.rand(6),
        name='',
    ),
    pgo.Bar(
        xaxis='x3', yaxis='y3',
        x=np.arange(6),
        y=np.random.rand(6),
        name='',
    ),
    pgo.Bar(
        xaxis='x4', yaxis='y4',
        x=np.arange(6),
        y=np.random.rand(6),
        name='',
    )
]

fig = pgo.Figure(data=traces, layout=layout)
fig.show()

And here the result:

Captura
Captura949×550 32.4 KB

Does someone know how to fix this problem?

Thank you all!

2

Hi @rusiano,

Welcome to Plotly forum!

You are using a low level code to define subplots. Starting with plotly version 4.0+ it is much simpler to define
and set subplot appearance.

Here is an example illustrating how a subplot figure can be defined, and how setting vertical_spacing between subplots, as well as the layout.height helps to remove plot window overlapping:

import plotly.graph_objects as go
import pandas as pd
from plotly.subplots import make_subplots

import numpy as np

fig = make_subplots(          
            rows=2, cols=1, 
            subplot_titles=('Title 1', 'Title 2'),
            vertical_spacing=0.3   
   
)

df = pd.read_csv("https://raw.githubusercontent.com/plotly/datasets/master/finance-charts-apple.csv")


fig.add_trace(go.Scatter(x=df.Date, y=df['AAPL.High'], name="AAPL High",
                         line_color='deepskyblue'), row=1, col=1)

fig.add_trace(go.Scatter(x=df.Date, y=df['AAPL.Low'], name="AAPL Low",
                         line_color='dimgray'), row=1, col=1)

fig.add_trace(go.Bar(y=np.random.randint(3,9, 11)), row=2, col=1)
fig.update_layout(title_text='Global title',
                  xaxis_rangeslider_visible=True,
                  height=600)
fig.show()

rgslider
rgslider700×650 29 KB

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)
1 Like
4

thank you very much!!!