Rangeslider range changes after callback

Dash Python
1

I’m updating a chart using a simple callback that filters a dataframe. When I change the dropdown, the rangeslider updates to a range beginning at the year 2000. My time series begins 9/10/2020.

Any idea what may be going on?

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

def get_data():
	df = pd.read_csv('data.csv')
	df['timestamp'] = df['timestamp'].astype(str)
	return df

def get_fig(df, symbol):
	fig = px.line(df, x="timestamp", y="skew")
	fig.update_xaxes(rangeslider_visible=True)
	fig.update_layout(transition_duration=500)
	return fig

app.layout = html.Div(children=[
		html.H1(children='Hello Dash'),
		html.Div(children='Dash: A web application framework for Python.'),
		dcc.Dropdown(
				id='symbol',
				options=[{'label':x, 'value':x} for x in ['SPY', 'QQQ', 'IWM']],
				value='QQQ'
						),
		dcc.Graph(id='skew-graph')
])

df = get_data()

@app.callback(
	Output('skew-graph', 'figure'),
	[Input('symbol', 'value')])
def main(symbol):
	filtered_df = df.query("underlying==@symbol & expiration=='2020-10-16'")
	fig = get_fig(filtered_df, symbol)
	return fig

On load everything is ok:

image
image1215×455 29.8 KB

After a selection from the dropdown, the rangeslider changes to an unusable range.

image
image1222×455 19.9 KB

these are the first 5 rows of the dataframe:

image

2

would appreciate the help if anybody has any insight!

3

Hi @victormora
I saw your question but I’m not sure what the problem might be. Could it be that you’re using the callback function argument symbol that is confusing the app because the Dropdown id name is also symbol?

4

Thanks for looking Adam! I tried changing the dropdown id but still had the same issue. I found the problem though! this is the line causing the issue:

fig.update_layout(transition_duration=500)

I removed that line and everything works as expected. Looks like a bug to me.

1 Like