How To Align a Heatmap And a Bar Chart With Proper Spacing

📊 Plotly Python
1

Hey all,

I have two different charts from different Jupyter notebooks, how can I put them side by side and completely match their sizes and spacing?

I tried setting width=750, height=1500 for both of them but spacing is still different, from tittle to elements on axises, they are all different. There are equal number of elements on both y axis in case it wasn’t clear.

Here is my code for the chart on the left

fig = go.Figure(data=go.Heatmap(
        z=z,
        x=dates,
        y=eui,
        xgap = 1,
        ygap = 1,
        colorbar=dict(
        titleside="top",
        tickmode="array",
        tickvals=[0, 1, 2, 3, 4, 5],
        ticktext=["Connected - Door Closed", "Connected - Door Open", "Connected - ?", "Disconnected"],
        ticks="outside"),
        colorscale='Reds'))


fig.update_layout(
    title="GATEWAY STATUS",
    xaxis_nticks=5,
    yaxis=dict(
    title='EUI',
    tickmode='linear'), # ===========
    xaxis=dict(
    title='Date',
    tickmode='linear'),
    width=1400, height=1500,
    font=dict(family='Consolas, monospace', size=15)) # font size

Here is for the one on the right:

import plotly.express as px
fig = px.bar(df_stability, x='connected_since', y='eui', orientation='h')


fig.update_layout(
    title="CONNECTION DURATION",
    yaxis=dict(
    title='Gateway EUI',
    side = 'right'), # ===========
    xgap=1,
    ygap=1,    
    xaxis=dict(
    title='Duration (h)'),
    font=dict(family='Consolas, monospace', size=15),
    width=750, height=1500) # font size
    
#fig.update_yaxes(automargin=True)
fig.update_yaxes(showgrid=False, zeroline=False)


    
# fig.show()


# In[45]:


plotly.offline.plot(fig, filename = 'connection001.html', auto_open=False)

2019-09-13-094302_3840x2160_scrot
2019-09-13-094302_3840x2160_scrot.png2322×1526 286 KB

I put them side by side using iFrame for HTML but if you have another suggestion, please let me know!

Best Regards