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!

three reasons why you should buy plotly pro: support open source, get great support, host your plots and dashboards online