Hello,
I have the code below, and I want to add various parameters to one chart using the dropdown menu.
However, the ranges of parameters are quite different and when they are plotted, they look like a straight line. I want to be able to add multiple X-axis.
I searched it on the web, and plotly documents. here is a way to add a secondary Y-axis adding secondary y-axis
There are only a few posts available for adding x-axis but they are also implementing plotly.graph_objects and not the plotly.express
from dash.exceptions import PreventUpdate
import plotly.express as px
import pandas as pd
import numpy as np
import dash_bootstrap_components as dbc
df=pd.DataFrame({'col1':[12,15,25,33,26,33,39,17,28,25],
'col2':[1002,1033,1037,1036,1036,1026,1031,1021,1015,1029],
'col3':[1,2,3,4,5,6,7,8,9,10]
})
app = Dash(__name__, external_stylesheets=[dbc.themes.SUPERHERO])
app.layout = html.Div([
html.Div(children=[
html.Button('Add Chart', id='add-chart', n_clicks=0),
]),
html.Div(id='container', children=[])
])
@app.callback(
Output('container', 'children'),
[Input('add-chart', 'n_clicks')],
[State('container', 'children')]
)
def display_graphs(n_clicks, div_children):
new_child = html.Div(
style={'width': '25%',
'display': 'inline-block',
'outline': 'thin lightgrey solid',
'padding': 10},
children=[
dcc.Dropdown(id={'type': 'feature-choice',
'index': n_clicks},
options=df.columns.values[0:2],
multi=True,
clearable=True,
value=[]
),
dcc.Graph(id={'type': 'dynamic-graph',
'index': n_clicks},
figure={}
)
]
)
div_children.append(new_child)
return div_children
@app.callback(
Output({'type': 'dynamic-graph', 'index': MATCH}, 'figure'),
[Input({'type': 'feature-choice', 'index': MATCH}, 'value')]
)
def update_graph(X):
if X is None:
raise PreventUpdate
fig1 = px.line(df, x=X, y='col3')
fig1.update_layout(
{'height': 600,
'legend': {'title': '', 'x': 0, 'y': 1.06, 'orientation': 'h'},
'margin': {'l': 0, 'r': 20, 't': 50, 'b': 0}
}
)
return fig1
if __name__ == '__main__':
app.run_server(debug=True)```