Black Lives Matter. Please consider donating to Black Girls Code today.

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()

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: