Adding a secondary axis in Plotly Python

Question

I'm working with a Dash graph object and I'm fairly new to it. I'm attempting to pass in a graph that has 2 scatter charts and a bar chart on the same figure but I'd like the bar chart (green) to be on it's own secondary y axis so it looks better than it does here:

Now from what I understand about Dash, I have to pass a go.Figure() object so I have a function which defines the data and the layout. I saw in the plotly documentation that you can use plotly express add secondary axis but I'm not sure how to do that within my frame work here. Any help would be greatly appreciated!

Here's my code:

def update_running_graph(n_intervals):
    df = pd.read_csv(filename)

    trace1 = go.Scatter(x=df['Timestamp'],
                        y=df['CLE'],
                        name='Crude',
                        mode='lines+markers')
    trace2 = go.Scatter(x=df['Timestamp'],
                        y=df['y_pred'],
                        name='Model',
                        mode='lines+markers')
    trace3 = go.Bar(x=df['Timestamp'],
                    y=df['ModelDiff'],
                    name='Diff',
                    )
    data = [trace1, trace2,trace3]
    layout = go.Layout(title='CLE vs Model')
    return go.Figure(data=data, layout=layout)

Solution 1

To add a secondary y-axis in dash you could do the following:

def update_running_graph(n_intervals):
    df = pd.read_csv(filename)

    trace1 = go.Scatter(x=df['Timestamp'],
                        y=df['CLE'],
                        name='Crude',
                        mode='lines+markers',
                        yaxis='y1')
    trace2 = go.Scatter(x=df['Timestamp'],
                        y=df['y_pred'],
                        name='Model',
                        mode='lines+markers',
                        yaxis='y1')
    trace3 = go.Bar(x=df['Timestamp'],
                    y=df['ModelDiff'],
                    name='Diff',
                    yaxis='y2'
                    )
    data = [trace1, trace2,trace3]
    layout = go.Layout(title='CLE vs Model',
                       yaxis=dict(title='Crude and Model'),
                       yaxis2=dict(title='Moddel Difference',
                                   overlaying='y',
                                   side='right'))
    return go.Figure(data=data, layout=layout)

you can add more y-axis they always need to have the form of yi with i the i-th axis. Then in the layout you can specify the layout of the i-th axis with yaxisi=dict(...).

Solution 2

This documentation page should be of use. Just modify to fit your code, since trace1 and trace2 appear to be on the same scale, just set trace3 to the secondary axis scale and you should be set. Below is an example with just only 2 but adding a third should not be too difficult.

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], y=[40, 50, 60], name="yaxis data"),
    secondary_y=False,
)

fig.add_trace(
    go.Scatter(x=[2, 3, 4], y=[4, 5, 6], 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.show()

Cheers!

Comments

[novawaly]

I keep getitng fhr following: ValueError: plotly.subplots.make_subplots may only be used in the v4_subplots plotly_future mode. To try it out, run >>> from plotly_future import v4_subplots before importing plotly.

[novawaly]

ive updated my version to 4 since it's out but it still doesn't work

[nicolaskruchten]

if you're having import issues, you'll want to uninstall plotly with both pip and conda and then install again with just one of the two.

[KobeJohn]

This is so helpful. Very intuitive setup.