Add Subplot colorbar

plotly.js
1

Is there any way to add the color bar to 2D subplots ?

2

@akw420
I can describe how the colorbar position is set in Python. It is then straightforward to get the similar settings in plotly.js
To add colorbar to each subplot, set the coloraxis for the corresponding trace,
and in figure layout define coloraxis.colorbar. More precisely if you are defining subplots with 2 rows and 1 column,
with a Heatmap in position (1,1) and Contour in (2, 1),
then in the defiition of the first trace set coloraxis='coloraxis', while in the definition of the second one `coloraxis=‘coloraxis2’.

The position of colorbar is set within fig.layout.coloraxis:

coloraxis=dict(colorscale='deep_r",
               colorbar=dict(x=1.05, 
                             y=0.58, 
                             xanchor='left', 
                             yanchor='bottom',
                             len=0.4, 
                             thickness=20)),
coloraxis2=dict(colorscale="matter_r",
                colorbar=dict(x=1.05, 
                              y=0.014, 
                              xanchor='left', 
                              yanchor='bottom',
                              len=0.4, 
                              thickness=20)))

Here is the corresponding plot: https://chart-studio.plotly.com/~empet/15285/#/.

You can also inspect the corresponding json file: https://chart-studio.plotly.com/~empet/15285/#code to see the trace definitions.

1 Like
3

Just place the color bar in its own axis and use subplots adjust to make room for it.

Rapidfs