CODEWITHSUNDEEP
jupyter-notebookplotly
Roy
Roy

Reputation: 945

How to setup Plotly two horizontal subplots containing heatmaps so that they don't share a colorscale?

I have two heatmaps. Their values are in totally different scale, so should not share a colorscale. I tried to create a plotly figure w/ two subplots (arranged horizontally) and put each of my heatmaps into one of the subplot. However, the two heatmap shares the same colorscale to the right of the heatmap on the right. The colorscale show two sets of labels overlapped w/ each other. What I'd like to see is that there are two colorscales, one to the right of each heatmap.

My code is below. Anyone seeing a problem here?

fig = plotly.tools.make_subplots(rows=1, cols=2)

fig.append_trace(mm, 1, 1)
fig.append_trace(sm, 1, 2)

plotly.offline.iplot(fig)

I have tried to set share_xaxes and share_yaxes to False explicitly. Didn't help.

Upvotes: 2

Views: 6330

Answers (2)

Loren
Loren

Reputation: 41

I found this solution: for 3 heatmaps, I created a grid of 6 boxes, in order to manually place on the side the colorbars of each heatmap :

fig = make_subplots(rows=1, cols=6,
                    subplot_titles=("Web", "Magasin", "Email"),
                    specs=[[{}, None, {}, None, {}, None]],
                    shared_yaxes=True)

then I drew the heatmaps by defining each colorbar :

fig.add_trace(go.Heatmap(
    z=df_web.values,
    x=df_web.columns.tolist(),
    y=df_web.index.tolist(),
    colorscale='RdBu',
    reversescale=True,
    colorbar = dict(x=0.27, title='Nb moyen', thickness=15)), row=1, col=1
)

fig.add_trace(go.Heatmap(
    z=df_mag.values,
    x=df_mag.columns.tolist(),
    y=df_mag.index.tolist(),
    colorscale='RdBu',
    reversescale=True,
    colorbar = dict(x=0.62, title='Nb moyen', thickness=15)), row=1, col=3
)

fig.add_trace(go.Heatmap(
    z=df_email.values,
    x=df_email.columns.tolist(),
    y=df_email.index.tolist(),
    colorscale='RdBu',
    reversescale=True,
    colorbar = dict(x=0.97, title='Nb moyen', thickness=15)), row=1, col=5
)

and finally I defined positions :

fig.update_layout(title_text='Répartition par jour et heure', title_x=0.5,
                height=250, margin=dict(l=0,r=0,b=50,t=25),
                xaxis=dict(
        domain=[0, 0.27]
    ),
    xaxis2=dict(
        domain=[0.35, 0.62]
    ),
    xaxis3=dict(
        domain=[0.7, 0.97]
    ))

Result : heatmaps whith separated colorbars

Upvotes: 3

Maximilian Peters
Maximilian Peters

Reputation: 31709

You could specify the x position of the colorbar explicitly, see the example below.

The figure looks better in the notebook, perhaps one should also move the right plot?

moved it

import plotly.plotly as py
import plotly.graph_objs as go
import plotly
plotly.offline.init_notebook_mode()

mm = go.Heatmap(
        z=[[1, 20, 30],
           [20, 1, 60],
           [30, 60, 1]],
        colorbar = dict(x=0.45), 
    colorscale='Viridis'
    )
sm = go.Heatmap(
        z=[[1, 2, 3],
           [2, 1, 6],
           [3, 6, 1]]
    )
fig = plotly.tools.make_subplots(rows=1, cols=2)
fig.append_trace(mm, 1, 1)
fig.append_trace(sm, 1, 2)

plotly.offline.iplot(fig)

Upvotes: 3

Related Questions