Dash annotated heatmap

That’s definitely no fun. Thanks for sticking with it!


i am trying to graph an annotated heatmap as well with the below code:
‘data’:[ff.create_annotated_heatmap(z=[arr1,arr2,arr3,arr4,arr5,arr6], x=[‘3B1M’,‘1M2M’,‘2M3M’,‘3M6M’,‘6M9M’,‘9M1Y’],
y=[‘EUR’,‘GBP’,‘JPY’,‘CHF’,‘NOK’,‘DKK’], colorscale=[[0, ‘red’], [1, ‘green’]])
‘layout’: {
‘title’: ‘Heatmap’

However, when i run it, nothing gets plotted.
The arr1, etc are pandas.core.series.Series type.

The code works when plotting it in jupyter notebook but not DASH. Below is the code that works:
y=[‘EUR’, ‘GBP’, ‘JPY’,‘CHF’,‘NOK’,‘DKK’]
z=[arr1, arr2, arr3,arr4,arr5,arr6]
colorscale = [[0, ‘red’], [1, ‘green’]]
fig = ff.create_annotated_heatmap(z, x=x, y=y, colorscale=colorscale)

if there are lots of data points, then the annotated text overlap with each other, is there a way to show only portion of it, but be able to use drag the image to see the other part.


You can define a slider that updates the axis range, to see a horizontal part of the heatmap, at each step:

1 Like

thank you, will try that, is it possible to rename the slider so that it only shows number but not step1, step2,…

In the definition of each step you can set a label that is shorter than f'step{k}'.

thank you, it worked, and is it possible to pass exact colors for each value instead of colorscale in annotated heatmaps?

nevermind, I figured it out.


Heatmap has no attribute, color, but you can use a discrete colorscale, instead See this discussion on how to define it: https://community.plotly.com/t/colors-for-discrete-ranges-in-heatmaps/7780.

In the heatmap, I have patches of same color, is it possible to create a custom legend for that?

@dewshrs Heatmap has an attached colorbar (when showscale=True), not a legend, for pointing out how z-values are colormapped You can show on the colorbar the values that are mapped on the same patch. Here
https://plotly.com/~empet/15229/heatmap-with-a-discrete-colorscale/#/ you can see how the colorbar is defined as well its tickvals and ticktext.

is it possible to only change the size of the heatmap but, keep the color bar same ?

Heatmap size is set via layout['width'] and layout['height'], while the colorbar height by colorbar['len']= h, with h in (0,1].

but if the height of heatmap is decreased, then the the height of colorbar also decreases even if you put 1, since its based on plot width. And another question, is it possible to plot two separate heatmaps of different layout sizes, side by side, or top and bottom?

1 Like

Hi all,

Does anyone know how to make a custom colorscale so the negative numbers in their heatmap are Red and the positive ones are green? and maybe even put the numbers close to 0 at yellow?

Thank you

This question is off-topic, I’d recommend creating a new thread for it.

sure, apologies. new thread here: Plotly Annotated Heatmap Colorscale (DASH)

Hello :slight_smile:,
I need to draw annotated heatmap which changes features (rows/columns) shown dynamically. When I draw for first time specific features lets say 9x9 matrix I got normal annotations.
But when added additional feature (matrix 10x10) I have issue with annotations are not shown at the right place. Has someone idea what can be the problem ?


I am using following code:

corr_text = np.around(corr_sw.values, decimals=2) 

font_colors = ['white', 'black'] 

x = y = corr_sw.columns.tolist()   

corr_matrix_fig = ff.create_annotated_heatmap(corr_sw.values, x=x, y=y, annotation_text=corr_text, colorscale='rdylbu', font_colors=font_colors, showscale = True)

#set xaxis to bottom
corr_matrix_fig['layout']['xaxis']['side'] = 'bottom'


Hi! I want to make a annotated heatmap in a tab web. So if you have multiple tables(use html.Div() ), what do you do with ff.create_heatmap() statement? I’ve tried a couple of inserts and they don’t work very well. Thank you!!