CODEWITHSUNDEEP
pythonplotly
Thomas
Thomas

Reputation: 12107

how can I get all the subplots to zoom and pan the same way on the X axis, with plotly

I have a plotly graph with subplots drawn this way:

fig = make_subplots(
    rows=4,
    cols=1,
    subplot_titles=("Price, orders and positions", "Margin use", "PnL and fees", "Volume traded"),
    row_heights=[0.5, 0.2, 0.2, 0.1],
    vertical_spacing=0.1
)

# price, orders, etc
fig.add_traces(
    [
        # draw price, average price and min / max
        go.Scatter(name='Price', x=df.index, y=df['price'], mode='lines', line=dict(color='rgba(31, 119, 180, 1.)')),
        go.Scatter(name='Average Price', x=df.index, y=df['average_price'], mode='lines', line=dict(color='rgba(31, 119, 180, 0.5)')),
        go.Scatter(x=df.index, y=df['price_max'], mode='lines', marker=dict(color="#444"), line=dict(width=0), showlegend=False),
        go.Scatter(x=df.index, y=df['price_min'], marker=dict(color="#444"), line=dict(width=0), mode='lines', fillcolor='rgba(68, 68, 68, 0.3)', fill='tonexty', showlegend=False),

        # draw the long / short orders
        go.Scatter(name='Long Open Price', x=df.index, y=df['orderlo_price'], mode='lines', line=dict(color='rgb(180, 119, 31)')),
        go.Scatter(name='Long Close Price', x=df.index, y=df['orderlc_price'], mode='lines', line=dict(width=2, color='rgb(220, 159, 31)')),
        go.Scatter(name='Short Open Price', x=df.index, y=df['orderso_price'], mode='lines', line=dict(color='rgb(119, 180, 31)')),
        go.Scatter(name='Short Close Price', x=df.index, y=df['ordersc_price'], mode='lines', line=dict(width=2, color='rgb(159, 220, 31)')),

        # add the position
        go.Scatter(name='position', x=df.index, y=df['position_price'], mode='lines', line=dict(color='rgb(240, 200, 40)'))
    ],
    rows=[1, 1, 1, 1, 1, 1, 1, 1, 1],
    cols=[1, 1, 1, 1, 1, 1, 1, 1, 1]
)

# margin use
fig.add_traces(
    [
        go.Scatter(name='Margin use', x=df.index, y=df['margin_use'], mode='lines', line=dict(color='rgba(31, 119, 180, 1.)')),
        #go.Scatter(name='Margin max', x=df.index, y=df['margin_max'], mode='lines', line=dict(color='rgba(31, 180, 119, 1.)'))
    ],
    rows=[2], #, 2],
    cols=[1], #, 1]
)
# PnL and fees
fig.add_traces(
    [
        go.Scatter(name='Unrealized PnL', x=df.index, y=df['unrealized_pnl'], line=dict(color='rgb(64, 255, 64, 1.0)')),
        go.Scatter(name='Realized PnL', x=df.index, y=df['realized_pnl'], fill='tozeroy', line=dict(color='rgb(32, 192, 32, 0.8)')),
        go.Scatter(name='Fees Paid', x=df.index, y=df['fees_paid'], fill='tozeroy', line=dict(color='rgb(192, 32, 32, 0.4)'))
    ],
    rows=[3, 3, 3],
    cols=[1, 1, 1]
)

# Volume traded
fig.add_trace(
    go.Scatter(name='Volume Traded', x=df.index, y=df['volume_traded'], fill='tozeroy', line=dict(color='rgb(32, 128, 192, 1.0)')),
    row=4,
    col=1
)

# remove the margins
fig.update(
    layout=go.Layout(
        margin=go.layout.Margin(l=0.5, r=0.5, b=0.5, t=50)
    )
)

how can I make sure all the subplots are synchronized regarding the X axis zoom and panning? Right now you can zoom in one subplot and suddenly the graph in that subplot has no relations to the other subplots.

Upvotes: 11

Views: 7322

Answers (1)

s3dev
s3dev

Reputation: 9701

Have a look at the Shared X-Axes section of the Plotly docs. I believe this is what you're looking for.

Essentially, add shared_xaxes=True to the make_subplots() function.

Upvotes: 17

Related Questions