python - Dash app multi line chart on two axes using plotly

Question

I have written the below code and the objective is:

• Plot a line chart with 6 lines, 3 on the primary axis (LHS) and 3 on the secondary axis (RHS)

The code I used is below and works in Plotly but when I open the dash app, there is no secondary axis

In the future I will be looking to have call backs to reduce the length of the series by date, so any tips on sliders or call backs to reduce array size would be greatly appreciated

# Import dependencies
import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objects as go
from plotly.subplots import make_subplots

# Create figure with secondary y-axis
fig = make_subplots(specs=[[{"secondary_y": True}]])

# Add traces
fig.add_trace(
    go.Scatter(x=[1, 2, 3, 4, 5], y=[1, 4, 9, 16, 25], name="yaxis data"),
    secondary_y=False,
)

# Add traces
fig.add_trace(
    go.Scatter(x=[1, 2, 3, 4, 5], y=[2, 5, 10, 17, 26], name="yaxis data"),
    secondary_y=False,
)

# Add traces
fig.add_trace(
    go.Scatter(x=[1, 2, 3, 4, 5], y=[3, 6, 11, 18, 27], name="yaxis data"),
    secondary_y=False,
)

fig.add_trace(
    go.Scatter(x=[1, 2, 3, 4, 5], y=[1, 6, 27, 64, 125], name="yaxis2 data"),
    secondary_y=True,
)

fig.add_trace(
    go.Scatter(x=[1, 2, 3, 4, 5], y=[2, 7, 28, 65, 126], name="yaxis2 data"),
    secondary_y=True,
)

fig.add_trace(
    go.Scatter(x=[1, 2, 3, 4, 5], y=[2, 7, 28, 65, 126], name="yaxis2 data"),
    secondary_y=True,
)

# Add figure title
fig.update_layout(
    title_text="Double Y Axis Example"
)

# Set x-axis title
fig.update_xaxes(title_text="xaxis title")

# Set y-axes titles
fig.update_yaxes(title_text="<b>primary</b> yaxis title", secondary_y=False)
fig.update_yaxes(title_text="<b>secondary</b> yaxis title", secondary_y=True)

fig.write_html('first_figure.html', auto_open=True)


external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div(children=[
    html.H1(children='Test - Dashboard'),

    html.Div(children='''
        Sample Data
    '''),

    dcc.Graph(
        id='Sample Data',
        figure=fig
    )
]
)

if __name__ == '__main__':
    app.run_server(debug=True)

question from:https://stackoverflow.com/questions/65927371/dash-app-multi-line-chart-on-two-axes-using-plotly

Answer 1

Waitting for answers