displaying imshow and scatter figures in separate rows in plotly

Question

I am trying to combine 2 plotly figures (imshow and Scattergl) one on top of another..

Separately they look like this

imshow

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

fig = px.imshow(distances, color_continuous_scale='RdBu_r', origin='lower', aspect='auto', height=300)

fig.update_xaxes(showticklabels=False)
fig.update_yaxes(showticklabels=False)

scatter

fig = go.Figure(data=go.Scattergl(
    x=ds['x'],
    y=ds['y'],
    mode='lines'
))

I would like to combine them into something that looks like this:

So far my last attempt was creating a figure with 2 subplots:

fig = make_subplots(rows=2, cols=1)

fig1 = fig.add_image(z=distances,row=1, col=1)
fig1.update_layout(coloraxis_showscale=True)
fig1.update_xaxes(showticklabels=False)
fig1.update_yaxes(showticklabels=False)

fig2 = fig.add_scattergl(x=df['x'],y=df['y'],mode='lines',row=2, col=1)
fig2.update_xaxes(showticklabels=True)
fig2.update_yaxes(showticklabels=True)

There are several issues with this code:

1. For some reason when I invoke the fig2.update_xaxes (or others), then the axis of fig1 are also affected.
2. I can't display the color scale next to first figure, and, frankly, the first figure isn't properly shown at all..

I would assume that the biggest problem is that I don't know how to replicate the plotly express px.imshow functionality with fig.add_image.. From the documentation I assume that this is what I am supposed to use..

How do you combine these 2 figures properly?

Answer 1

In this case, you have defined one figure that constitutes a subplot with two rows and one column. So in one figure, you would add a heatmap in the first row and a scatter plot line mode in the second row. the heatmap for the first graph can be created with a graph object, but I reused the graph data from px.imshow() because it is easy to reproduce. The color bar is aligned with the height of the heatmap.

from plotly.subplots import make_subplots
import plotly.express as px
import plotly.graph_objects as go
import numpy as np
import pandas as pd

df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/finance-charts-apple.csv')

fig_imshow= px.imshow(distances, color_continuous_scale='RdBu_r', origin='lower', aspect='auto')
distances = np.random.rand(150).reshape(1,150)

fig = make_subplots(rows=2, cols=1)

fig.add_trace(go.Heatmap(fig_imshow.data[0]),row=1, col=1)
fig.update_layout(coloraxis_showscale=True, coloraxis=dict(colorbar_len=0.5, colorbar_y=0.80))
fig.update_xaxes(showticklabels=False)
fig.update_yaxes(showticklabels=False)

fig.add_trace(go.Scatter(x=df['Date'], y=df['AAPL.High']),row=2, col=1)
fig.update_xaxes(showticklabels=True)
fig.update_yaxes(showticklabels=True)

fig.show()