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)

MGP · Accepted Answer · 2020-03-02 14:42:17Z

26

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(...).

answered Mar 2, 2020 at 14:42

MGP

2,6732 gold badges22 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

KobeJohn Over a year ago

This is so helpful. Very intuitive setup.

Boorhin Over a year ago

It is the best way to do it, the documentation should include this method that seems the most adapted and in the philosophy of Plotly. I would recommend to deactivate the grid in both y axis as it creates confusion in the display. just add showgrid=False to both yaxis layout dictionaries

Steven Barnard · Accepted Answer · 2019-07-31 18:23:14Z

10

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!

answered Jul 31, 2019 at 18:23

Steven Barnard

6148 silver badges13 bronze badges

3 Comments

novawaly Over a year ago

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 Over a year ago

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

nicolaskruchten Over a year ago

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.

Collectives™ on Stack Overflow

Adding a secondary axis in Plotly Python

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related