Plotly: Is there a way to make the date slider an area chart rather than a line chart?

Question

Context

Creating a web app and using Plotly for graphs. I created the date slider but want it to be a to be an area graph rather than a line graph. The main graph is fine, and this will not change. But as more and more lines are added, it adds to the slider and does not make it look pretty. So I want to fix the date slider, below the line graph (main graph) as an area graph but maintain the main graph as a line graph. Have looked in the documentation but have not seen anything to this effect.

code:

 plotly_fig = px.line(data_frame=dataframe_cols1,x=dataframe_cols1.index,y=Columns_select1)
                            #width=780, height=830) # Get data from the dataframe with selected columns, choose the x axis as the index of the dataframe, y axis is the data that will be multiselected
        
        # Legend settings
        plotly_fig.update_layout(showlegend=True)        
        plotly_fig.update_layout(margin_autoexpand=True) # prevent size from changing because of legend or anything
        plotly_fig.update_traces(mode="lines", hovertemplate=None)
        plotly_fig.update_layout(hovermode="x unified")
                
        plotly_fig.update_layout(legend=dict(
                          orientation = "h",
                          yanchor="bottom",
                          y=-.85,
                          xanchor="right",
                          x=1.0
                        )) 
        
        
        height = 800
        plotly_fig.update_layout(
        autosize=False,
        width=870,
        height=height)
        
        # Date range
        plotly_fig.update_xaxes(rangeslider_visible=True,
                                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")
                                    ])))



     st.plotly_chart(plotly_fig,use_container_width=True) # streamlit show graph

Problem

Is this possible?

Answer 1

It can be done by plotting the different traces on different axes. For instance, you could plot the area chart using the x and y axes, where x has a date slider. You could then plot the line charts using the x2 and y2 axes, where in this case x2 does not have a date slider. See the code below for an example.

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

df = pd.DataFrame({'timestamps': pd.date_range(start=pd.Timestamp('2020-01-01'), periods=100, freq='D'),
                   'series_1': np.cos(4 * np.pi * np.linspace(0, 1, 100)),
                   'series_2': np.linspace(0, 1, 100),
                   'series_3': np.linspace(0.5, 1.5, 100)})

data = []

data.append(go.Scatter(x=df['timestamps'],
                       y=df['series_1'],
                       name='series_1',
                       xaxis='x',
                       yaxis='y',
                       mode='lines',
                       fill='tozeroy',
                       line=dict(color='gray')))

data.append(go.Scatter(x=df['timestamps'],
                       y=df['series_2'],
                       name='series_2',
                       xaxis='x2',
                       yaxis='y2',
                       mode='lines',
                       line=dict(color='green')))

data.append(go.Scatter(x=df['timestamps'],
                       y=df['series_3'],
                       name='series_3',
                       xaxis='x2',
                       yaxis='y2',
                       mode='lines',
                       line=dict(color='purple')))

layout = dict(plot_bgcolor='white',
              paper_bgcolor='white',
              margin=dict(t=30, l=30, r=30, b=30),
              yaxis2=dict(color='gray',
                          linecolor='gray',
                          showgrid=False,
                          mirror=True),
              xaxis2=dict(type='date',
                          overlaying='x',
                          matches='x',
                          visible=False),
              yaxis=dict(visible=False),
              xaxis=dict(type='date',
                         color='gray',
                         linecolor='gray',
                         showgrid=False,
                         mirror=True,
                         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')])),
                         rangeslider=dict(visible=True, bordercolor='gray')))

fig = go.Figure(data=data, layout=layout)

fig.show()