Plotly: Secondary y-axis causes empty space on the right

Question

I'm working on a plotly dash chart with lots of data that runs on ultra high res. On adding the second y-axis, I discovered, that an empty space appears on the right of the chart inside of the plotly svg component. That empty space vanishes when I turn off the second axis. It can be seen very well, when the chart is maximized over the entire screen.

As a showcase I used an example from the plotly documentation:

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

# 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="Right margin",
    showlegend=False
)

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

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

fig.show()

It yields the following chart, not being centered any more:

empty_space_on_the_right

How can I get rid of that empty space?

user_3142385 · Answer

There seems to be something wrong when calculating the horizontal sizes when the secondary_y is included. This can be fixed changing the margin passed via specs:

fig = make_subplots(specs=[[{"secondary_y": True,"r":-0.06}]])

In this case, you can resize, and both sides keep the same distance to the borders.

user_10457843 · Answer

You can specify the margins in fig.update_layout(). I set the right margin to 0.

You can also adjust the top, bottom and left margins. e.g. margin = dict(l=50, r=50, b=50, t=50)

# Add figure title
fig.update_layout(
    title="Right margin",
    showlegend=False,
    margin=dict(r=0)
)

Plotly: Secondary y-axis causes empty space on the right

2 Answers