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

Annotated Heatmap using ff

Hi all,
How can i create an annotated heatmap using figure factory without all z value combinations for x and y. Not all x and y combinations have a z value.


Insert np.nan in the positions when you want to have gaps:

import plotly.figure_factory as ff
import numpy as np
z = np.array([[.1, np.nan, .5],
     [1.0, .8, .6],
     [.6, .4, np.nan]])

x = ['Team A', 'Team B', 'Team C']
y = ['Game Three', 'Game Two', 'Game One']

z_text = [['Win', ' ', 'Win'],
          ['Lose', 'Lose', 'Win'],
          ['Win', 'Win', '']]

fig = ff.create_annotated_heatmap(z, x=x, y=y, annotation_text=z_text, colorscale='Viridis')
fig.update_layout(width=600, height=600, xaxis_showgrid=False, yaxis_showgrid=False, template='none')

Hi @empet.

That would be great if this was just a static heatmap, but this is for a dynamic dashboard which changes as per my selection in my dashboard.It looks much easier for a 3 x 3 heatmap. What is the heatmap has say 7 x 7 and needs to be dynamically updated with selection.

Hi @Jason4,

If you want to have gaps in the unselected cells you have to update through code the corresponding cells with np.nan, respectively with ’ ’ for annotations. ff.create_annotated_heatmap cannot do this automatically.


Thanks for your help there @empet. Would you know if there is an update on how to add a local image as a background for plotly graph image? Is there a workaround?


I saved this code a time ago from a comment left here on forum

import base64
#set a local image as a background
image_filename = 'plotly-logo1.png'
plotly_logo = base64.b64encode(open(image_filename, 'rb').read())

layout = go.Layout(
                height=600, width=600,
                images= [dict(
                    xref="paper", yref="paper",
                    x=0.5, y=0.90,
                    sizex=0.95, sizey=0.95,
fig = go.Figure(layout=layout)
1 Like