Subplots of two heatmaps: overlapping text colourbar

Hello,

I made one figure with two subplots of heatmaps with Go.Heatmap.
Everything looks like it should do, however, some text from the colourbar (which the two plots share), sometimes seem to overlap each other. Itโ€™s not with all numbers, but always with one or two of them.

How can I solve this?

Hi @Bee, probably your two subplots have each a colorbar, and the two overlap indeed. You can use a common coloraxis instead as described in this example.

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

fig = make_subplots(1,2)

fig.add_trace(
 go.Heatmap(x = [1, 2, 3, 4], z = [[1, 2, 3, 4], [4, -3, -1, 1]], coloraxis = "coloraxis"), 1,1)

fig.add_trace(
 go.Heatmap(x = [3, 4, 5, 6], z = [[10, 2, 1, 0], [4, 3, 5, 6]], coloraxis = "coloraxis"),1,2)
fig.update_layout(coloraxis = {'colorscale':'viridis'})

fig.show()
1 Like

Unfortunately I have two plots which have significant different values. The range of the first plot is between 200-300 whereas the second one is between 4-5. Using a common color axis will lead to having only two colors in both plots, which is not what I try to achieve. The colourbar which I showed before is actually exactly what I want, unfortunately the text is overlapping.

I will try to make two bars instead. I did it with giving the parameters x, y, and len for colorbar to decide the position of both separate colourbars. Thank you for your help.

In this case where you do need one colorbar per subplot, you can change the position of one of the colorbars so that they donโ€™t overlap

from plotly.subplots import make_subplots
import plotly.graph_objects as go
import numpy as np
fig = make_subplots(1, 2, horizontal_spacing=0.15)
fig.add_trace(go.Heatmap(z=np.random.random((5, 5)), colorbar_x=0.45), 1, 1)
fig.add_trace(go.Heatmap(z=np.random.random((5, 5)) + 3), 1, 2)
fig.show()

1 Like

I guess this is what you were trying to do, but just writing how to do it in case somebody reads this post :-).

2 Likes

thanks thatโ€™s perfect :slight_smile:

Hi Emma,

I am trying to make a sequence of heatmaps controlled by a slider, so far so good. But I notice that once you assign the axis with coloraxis='coloraxis1 (so that all the heatmaps are having the same colorscale), then you can no longer use colorbar_x or colorbar_y to move it around. Would you please help me verify if this is accurate? And may I know how to move colorbar around under this situation? Thank you very much!

Hi @dlzzk,
If you want to use different coloscales for different heatmaps, then you have to associate a colorais to each subplot:

from plotly.subplots import make_subplots
import plotly.graph_objects as go
import numpy as np
fig = make_subplots(1, 2, horizontal_spacing=0.15)
fig.add_trace(go.Heatmap(z=np.random.random((5, 5)), coloraxis='coloraxis' ), 1, 1)
fig.add_trace(go.Heatmap(z=np.random.random((5, 5)) + 3, coloraxis='coloraxis2' ), 1, 2)
fig.update_layout(width=700, height=400,
                  coloraxis=dict(colorscale='deep_r', colorbar_x=0.43, colorbar_thickness=23),
                  coloraxis2=dict(colorscale='matter_r', colorbar_x=1.0075, colorbar_thickness=23))

Hi,

I have the same issue as described above. The described soution works fine for heatmap subplots in horizontal arrangement.
However, I want to arrange the heatmap subplots vertically below each other with their own colorbars on the right. I tried to use the colorbar_y parameter to arrange the colorbars below each other. The colorbars can be positioned below each other, but they still overlap due to their length. Is there a way to determine the size of the colorbar? I.e. to shorten the colorbars?
I only found a parameter for the bar thickness, none for the size. Thanks

The colorbar length is controlled by setting colorbar_len=0.75, or any value in (0,1].

1 Like