[SOLVED] Python - Plotly - Range sliders only work on top figure in vertically stacked graphs

Issue

I have managed to get almost exactly what i wanted from this using python for the first time but im stuck with the final piece.

I cannot get the Plotly range slider to effect both figures. I have vertically stacked subplots, figure1 & figure2. stacked into this_figure.

I am writing data to a CSV and reading from there into the below figures.

    figure1 = px.line(df,  x = 'time', y = 'temp', title='Temperature')
    figure2 = px.line(df,  x = 'time', y = ['Dosinga','Dosingb'], title='Dosing')

    figure1_traces = []
    figure2_traces = []
    for trace in range(len(figure1["data"])):
        figure1_traces.append(figure1["data"][trace])
    for trace in range(len(figure2["data"])):
        figure2_traces.append(figure2["data"][trace])

    #Create a 1x2 subplot
    this_figure = sp.make_subplots(rows=2, cols=1, subplot_titles =['Temperature', 'Dosing'])
    this_figure.update_layout(height = 1000, width = 2500, title_text = "Fishtank")

    for traces in figure1_traces:
        this_figure.append_trace(traces, row=1, col=1)
    for traces in figure2_traces:
        this_figure.append_trace(traces, row=2, col=1)

    
    this_figure.update_layout(
    xaxis=dict(
        rangeselector=dict(
            buttons=list([
                dict(count=1, label="1D", step="day", stepmode="backward"),
                dict(count=7, label="1W", step="day", stepmode="backward"),
                dict(count=1, label="1M", step="month", stepmode="backward"),
                dict(step="all")
            ])
        ),
        rangeslider=dict(
            visible=True
        ),
        type="date"
    )
    )
    
    #the subplot as shown in the above image
    this_figure.write_html("/home/pi/shared/Graph.html")

I have tried adding the range slider to each figure seperatly, as below but for both figures. I have also tried adding the range slider to only one of the figure at a time.

all of these attempts have caused no issues with the code but the range slider and range selector buttons completely disappear.

figure_1.update_layout(
    xaxis=dict(
        rangeselector=dict(
            buttons=list([
                dict(count=1, label="1D", step="day", stepmode="backward"),
                dict(count=7, label="1W", step="day", stepmode="backward"),
                dict(count=1, label="1M", step="month", stepmode="backward"),
                dict(step="all")
            ])
        ),
        rangeslider=dict(
            visible=True
        ),
        type="date"
    )
    )

Solution

If you want a range slider for each plot, add the first as you've done with this_figure.update_layout( xaxis=dict( etc, then add the second in the same manner but specifying xaxis2.

To ensure you can see everything on the screen and things don't overlay you may have to tweak the vertical_spacing when initialising your subplots. For example: make_subplots(rows=2, cols=1, subplot_titles=['Temperature', 'Dosing'], vertical_spacing=0.5)

Answered By - acrobat

Answer Checked By - David Goodson (WPSolving Volunteer)