Black Lives Matter. Please consider donating to Campaign Zero's mission of ending police violence in America.
https://www.joincampaignzero.org

Dash annotated heatmap

Hi! I’ve just started re-writing my app from MATLAB to Dash. Dash is awesome! Sorry for the newbie question, but I’m having trouble with the annotated heatmap from figure factory. The basic Heatmap works with no problem. Here is a simplified code sample from my app:

html.Div([
dcc.Graph(
id=‘StyleBox’,
figure={
‘data’: [go.Heatmap(
z=[[1.0,2.0,3.0],
[4.0,5.0,6.0],
[7.0,8.0,9.0]],
)],
‘layout’: go.Layout(title= go.layout.Title(text = ‘Style Box’),
height=300,
paper_bgcolor= ‘whitesmoke’,
),
}
),
],className = ‘six columns’),

it produces a heatmap as expected:

However if I try using the annotated heatmap, the graph is blank:
figure={
‘data’: [ff.create_annotated_heatmap(
z=[[1.0,2.0,3.0],
[4.0,5.0,6.0],
[7.0,8.0,9.0]],
)],

Thanks for your help!

Welcome to Dash! Try figure=ff.create_annotated_heatmap(...)

Thanks so much - that works! But with that syntax, how do I add layout attributes?

ff.create_annotated_heatmap and all of the px. methods return a figure, which you can update with stuff like fig['layout] = {<your layout>} or fig['layout']['title'] = 'my title' or fig.update_layout(...).

I’d recommend reading through this (new) tutorial which covers it in detail: https://plot.ly/python/creating-and-updating-figures/

I was just coming back to give an update that I had found the answer…
This post was helpful to me as well : Annotated Heatmap Sorting

I appreciate you being so patient with the newbie questions. It’s so frustrating to get stuck on some dumb syntax issue for hours.

BTW, I think I’m in love with the Dash Datatable :slight_smile:

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

Hi,

i am trying to graph an annotated heatmap as well with the below code:
dcc.Graph(
id=‘heatmap’,
figure={
‘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’]
x=[‘3B1M’,‘1M2M’,‘2M3M’,‘3M6M’,‘6M9M’,‘9M1Y’]
z=[arr1, arr2, arr3,arr4,arr5,arr6]
colorscale = [[0, ‘red’], [1, ‘green’]]
fig = ff.create_annotated_heatmap(z, x=x, y=y, colorscale=colorscale)
fig.show()

Hi!

I had the same experience.

No need for the dictionary - try:

figure = ff.create_annotated_heatmap(

x=[your data],

y=[your data],

z=[your data],

Etc…

Hi again,

Just in case there are other people stuck on the same thing, below is an example that I hope will be helpful to other newbies(like me)

It shows 4 different ways to create a heatmap in Dash. The 3rd way shows the problem with the annotated heatmap not showing up. If you try to incorporate the figure factory (ff.) annotated heatmap using the same syntax as a plotly graphic_objects (go.), it doesn’t work. You get the blank graph. If you create the figure first as in the 4th example, it works.

If this is just a newbie hack, I’d be happy to hear about a better way. But this solved my problem. I hope this helps!.. (post 1 of 2)

import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.figure_factory as ff
import plotly.graph_objects as go

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

fig1 = ff.create_annotated_heatmap(
    z=[[1, 2, 3], [4, 1, 2], [4,5,6]]
)
 
fig1.layout.update(
        title_text='FF Heatmap'
)
app.layout = html.Div(children=[
    dcc.Graph(
        figure={
            'data': [
                {'z': [[1, 2, 3], [4, 1, 2], [4,5,6]],
                    'type': 'heatmap'},
            ],
                            
            'layout': {
                'title': 'Dash Heatmap'
            }
        }
    ),

    dcc.Graph(
        figure={
            'data': [go.Heatmap(
                z = [[1, 2, 3], [4, 1, 2], [4,5,6]])
            ],
                            
            'layout': {
                'title': 'Dash GO Heatmap'
            }
        }
    ),


    dcc.Graph(
        figure={
            'data': [ff.create_annotated_heatmap(
                z = [[1, 2, 3], [4, 1, 2], [4,5,6]])
            ],
                            
            'layout': {
                'title': 'Dash FF Heatmap'
            }
        }
    ),

    
    dcc.Graph(
        figure= fig1,            
    )

])

if __name__ == '__main__':
    app.run_server(debug=True)



(image)
![FF Test Output|227x500](upload://sQvjtvAbg3vdSgOxVPhLXI6hnbV.png)

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.

@dewshrs

You can define a slider that updates the axis range, to see a horizontal part of the heatmap, at each step:
https://plotly.com/~empet/15573/.

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.

@dewshrs

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 ?