dash (1.9.1)
dash-core-components (1.8.1)
dash-html-components (1.0.2)
dash-renderer (1.2.4)
dash-table (4.6.1)
import dash
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
from dash.dependencies import Input, Output, State
from plotly.subplots import make_subplots
d = {'col1': ['a', 'b'], 'col2': [3, 4], 'col3': [6, 7]}
df = pd.DataFrame(data=d)
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.layout = html.Div(children=[
dcc.Dropdown(
id='sel_ts',
options=[
{'label': 'Ascending', 'value': 'asc'},
{'label': 'Descending', 'value': 'des'},
],
value='asc'
),
html.Button("Update", id='button'),
dcc.Graph(
id='graph_ts',
figure={}
),
dcc.Graph(
id="single",
figure={}
)
])
@app.callback([Output("graph_ts", "figure"), Output("single", "figure")],
[Input("button", "n_clicks")],
[State("sel_ts", "value")])
def update_graph_multi_timeseries(_clicks, ts_selected):
fig = make_subplots(
rows=2,
cols=1,
shared_xaxes=True,
shared_yaxes=False,
)
if ts_selected == "asc":
plot = df.copy().sort_values('col1', ascending=True)
else:
plot = df.copy().sort_values('col1', ascending=False)
x = list(plot['col1'])
y1 = list(plot['col2'])
y2 = list(plot['col3'])
print(x)
fig.append_trace(
{'x': x,
'y': y1,
'mode': 'markers',
'name': 'single_trace'},
1, 1
)
fig.append_trace(
{'x': x,
'y': y2,
'mode': 'markers',
'name': 'single_trace'},
2, 1
)
fig["layout"].update(
autosize=True,
template="plotly_white",
)
return fig, {'data': [
{'x': x,
'y': y1,
'mode': 'markers',
'name': 'single_trace'}
]}
if __name__ == '__main__':
app.run_server(debug=True)
Describe your context
Describe the bug
I have set up a subplot and a normal plot, where the input x-axis is reversed when the button is clicked. It displays correctly in the single plot, but the subplot fails to change axis order:
Expected behavior
Subplot should respect the x-axis order supplied by the traces.
Screenshots
Initial state of app:
Subplot retains initial state, whereas single plot correctly changes order:
