Subsplots with multiple y-axes, shared between subplots

📊 Plotly Python
1

I am new to plotly and I am trying to make a flexible setup using plotly (and streamlit) with NxM subplots with each plot having one x-axis and multiple y-axes. The x-axes and y-axes are shared between plots.

Below a minimal example with only one subplot, with three y-axes. The resulting plot only has one y-axis (See plot). Can anyone help me with this?

from plotly.subplots import make_subplots
import plotly.graph_objects as go

# Create a figure with one subplot and secondary y-axis
fig = make_subplots(rows=1, cols=1)

# Add a trace to the primary y-axis
fig.add_trace(
    go.Scatter(x=[1, 2, 3], y=[10, 20, 30], name="Primary Y", yaxis="y"),
    row=1, col=1
)

# Add a trace to the secondary y-axis (y2)
fig.add_trace(
    go.Scatter(x=[1, 2, 3], y=[0.1, 0.4, 0.9], name="Secondary Y", yaxis="y2"),
    row=1, col=1
)

# Add a trace to the tertiary y-axis (y3)
fig.add_trace(
    go.Scatter(x=[1, 2, 3], y=[100, 200, 300], name="Tertiary Y", yaxis="y3"),
    row=1, col=1
)

print(fig.layout)

# Update layout for the primary and secondary axes
fig.update_layout(
    title="Minimal Example with Three Y-Axes",
    xaxis=dict(title="Producing Months"),
    yaxis=dict(title="Primary Y-Axis", side="left", range=[0,1000]),
    yaxis2=dict(title="Secondary Y-Axis", side="left", anchor="x", overlaying="y", range=[0,1], autoshift=True),
    yaxis3=dict(title="Tertiary Y-Axis", side="left", anchor="x", overlaying="y", range=[0,500], autoshift=True),
)

# Show the figure
fig.show()

minimal_example_with_three_axes
minimal_example_with_three_axes704×450 8.99 KB

2

:wave: Hi, have you tried the documentation? Maybe if you could upload a screenshot from the picture it would be easy to see what you’re saying, at least to me. I don’t know if you are using fig = make_subplot() but I’m encourage you to pass by the docs here: Table_Subplots and Subplot_charts. I’ll hope this answer would help you.

4

I think I guessed that I’ve finally understood what you’re trying to achieve. Take a look a this plot:

image
image868×540 131 KB

This image I’ve found it at this post, Plot_with_two_yaxes, and I guess that it’s plotted with Plotly Dash.
Seems to me that it’s a problem of scales, if the two scales were similar, the plot will render appropriately, so in case that you couldn’t find the way to align the two scales, what do you think scaling the data?

6

Thanks @JuanG.

I also found a couple of example on the forum:

[Subplot with multiple y axis - #3 by cobym]

[Can Subplot support multiple y-axes? - #3 by empet]

The first link provided the solution. Rewriting the same code in a slightly different manner did the trick.

from plotly.subplots import make_subplots
import plotly.graph_objects as go

# Create a figure with one subplot and secondary y-axis
fig = make_subplots(rows=1, cols=1)

# Add a trace to the primary y-axis
trace1 = go.Scatter(x=[1, 2, 3], y=[10, 20, 30], name="Primary Y")

# Add a trace to the secondary y-axis (y2)
trace2 = go.Scatter(x=[1, 2, 3], y=[0.1, 0.4, 0.9], name="Secondary Y")

# Add a trace to the tertiary y-axis (y3)
trace3 = go.Scatter(x=[1, 2, 3], y=[100, 200, 300], name="Tertiary" )

fig.append_trace(trace1, row=1, col=1)
fig.append_trace(trace2, row=1, col=1)
fig.append_trace(trace3, row=1, col=1)

fig['data'][0].update(yaxis='y' )
fig['data'][1].update(yaxis='y2')
fig['data'][2].update(yaxis='y3')

print(fig.layout)

# Update layout for the primary and secondary axes
fig.update_layout(
    title="Minimal Example with Three Y-Axes",
    xaxis=dict(title="Producing Months"),
    yaxis=dict(title="Primary Y-Axis", side="left", anchor="x", range=[0,1000]),
    yaxis2=dict(title="Secondary Y-Axis", side="left", anchor="free", overlaying="y", range=[0,1], autoshift=True),
    yaxis3=dict(title="Tertiary Y-Axis", side="left", anchor="free", overlaying="y", range=[0,500], autoshift=True),
)

# Show the figure
fig.show()