TODAY learn how to bring Drag & Drop to Dash with Dashboard Engine. 🌠 Sign up for the live event!

Graph rangeslider not working when adding traces dropdown

I am trying to create a graph controlled with a dropdown (which add traces on the graph) and with a rangeslider on the xaxis. When I generate the figure apart from the dash app it works. However, the traces of the different plots of the graph disappear when select different variables of the dropdown (multi dropdown).

code figure:

Blockquote
def figure(patient,variable):

f=df.query('patient=='+str(patient))[str(variable)]
colors = np.random.rand(20)
dff=df
steps = 1/6
ends = [0.16,0.33,0.50,0.67,0.84,1]
shapes = []
colors = ['red', 'orange','green','green','orange','red']*len(f)
for i, e in enumerate(ends):
    shapes.append(dict(type="rect",
                    xref="paper",
                    yref="paper",
                    x0=0,
                    y0=e-steps,
                    x1=1,
                    y1=e,
                    fillcolor=colors[i],
                    opacity=0.5,
                    layer="below",
                    line_width=0,
    )
    )
layout = go.Layout(
title=str(variable),    
plot_bgcolor='#FFFFFF',
barmode="group")  
fig=go.Figure(layout=layout)
fig.add_trace(go.Scatter( x= np.array(list(range(0, np.shape(f)[0]))), y=f,  
                          mode='markers +lines',
                          fillcolor= '#FFA500',
                            marker = dict(size=9, color=list(map(SetColor, f))),
                            line=dict(color='#FFFFFF', width=6)))

fig.update_layout(title_text="Heart rate",xaxis=dict(showgrid=False), shapes=shapes,dragmode='pan',clickmode='select',hovermode="x unified",
                  hoverlabel=dict(bgcolor='#00FFFF', bordercolor='#00FFFF'), transition=dict(duration=100))
return fig

Code Dash:

      dbc.Tab(tab_id="tab_3", label="Tab 3", children=[
        dbc.Container([ 
                dbc.Card([dbc.CardHeader([html.H4("Patient 2")]),
                          dbc.CardBody([html.P("Patient 2"),dcc.Dropdown(id='drop_menu',
                              options=[{'label':'heart rate', 'value':'heart rate'},
                                       {'label':'respiratory rate','value':'respiratory rate'},
                                       {'label':'temperature','value':'temperature'},
                                       {'label':'oxygen saturation','value':'oxygen saturation'},
                                       {'label': 'systolic blood pressure','value': 'systolic blood pressure' },
                                       {'label': 'diastolic blood pressure', 'value':'diastolic blood pressure'},
                                       {'label': 'score','value':'score'}
                                       ], className= 'mb-2', multi=True
                          ), dcc.Graph(id='graph2')])],  style={'backgroundColor':'#FFA500', "height":"40rem"},  className= 'mb-2' )
        ], fluid=True) ])

@app.callback(
Output(“graph2”,“figure”),
[Input(“drop_menu”, “value”)]
)
def graph(variables):
if variables is None:
raise dash.exceptions.PreventUpdate()
else:
return figure(2,variables)



Finally I could solved it, the problem was that i had to put a rangeslider_range between the boundaries of the data to be able to correctly see the traces in the rangeslicer when more traces are added