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?

Thanks for responding. Though not quite sure how to apply it to the date slider graph. I don't want to change the entire graph into an area, just the date slide graph below the main graph. — Desmond
I don't have much experience with this type of graph, but I have added a slide to the sample on the official website. If you want to fill both, it's possible. — r-beginners
Yeah, changing the entirety of the graph from a line to an area changes the slider also. I tried the link you sent me. I was hoping to find a way to keep the top but the bottom as an area chart. But its fine, thank you anyway :) — Desmond

Flavia Giammarino Flavia Giammarino · Accepted Answer · 2021-02-16T07:55:02

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()

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

1 Answers