Error Showing Text Labels in Heatmap

Dash Python
1

I am trying to render text labels on a Heatmap. I have verified that I am running the latest version of Plotly (5.5.0), and am using the example code in the “Text on Heatmap Points” section on the Heatmaps webpage (Heatmaps). My code looks like the following:

from dash import Dash, dcc, html
import plotly.graph_objects as go

figHeatmap = go.Figure(
                       data=go.Heatmap(
                                       z=[[1,20,30], [20,1,60], [30,60,1]],
                                       text=[['1','2','3'],['4','5','6'],['7','8','9']],
                                       texttemplate="%{text}",
                                       textfont={"size":20}
                                       )
                      )
figHeatmap.show()

# app = Dash()
# app.layout = html.Div([
#     dcc.Graph(figure=figHeatmap)
# ])
#
# if __name__=='__main__':
#     app.run_server()

My code is part of a Dash app, and when I run the application what I see is this:

Screenshot from 2021-12-28 16-17-36
Screenshot from 2021-12-28 16-17-361460×229 5.42 KB

whereas what I expect to see, according to the Heatmap webpage is this:

Screenshot from 2021-12-28 16-18-23
Screenshot from 2021-12-28 16-18-23851×396 16.7 KB

However, when I run the example interactively, and use fig.show(), it does indeed work as expected. Therefore, I believe that my issue is with Dash and not with Plotly. Would that be a fair assessment? In any case, can anyone help me get the labels to show on the Heatmap when used in a Dash app? The labels do show on hover, but I’m looking for text labels without hovering.

Thanks!

2

hi @shwiftyRick
Welcome to the Dash community.

Thank you for reporting this. I agree, this seems a bit odd. The graph displays differently when run with Dash. Let me check with the team and get back to you later this week with an answer.

Have a good day,

3

Thank you @adamschroeder I appreciate your help!

4

Hi @adamschroeder, I just want to check in to see if there’s any news from the team about this?

5

hi @shwiftyRick
Sending you a private message right now. Still trying to figure this out. I’ll also post here the final answer publicly once we get it.

6

@adamschroeder Was there ever an answer to this? I’m having a similar issue and I suspect it’s related. I’m exporting to an HTML div and then pasting the result into a different HTML document with [1] in the head. I similarly see no text in the cells but if I simply fig.show(), the text renders fine.

pip shows I have version 5.6.0 but maybe the cdn file is out-dated or something?

[1] -

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
7

Hi @lcorcodilos
Welcome to the Community and thank you for reminding me of this.
Yes, the problem that @shwiftyRick posted above should have been resolved with the new text data on heatmap capabilities that came with Plotly.js v2.8.0

8

Hmmm… I still see an issue so maybe I should share some code. Here is the relevant block put together:

from plotly.offline import plot
import plotly.graph_objects as go
import pandas as pd

df = pd.DataFrame(...)
fig = go.Figure(go.Heatmap(
    z=df.values, x=df.index, y=df.columns,
    text=df.values.astype(str),
    texttemplate="%{text:.2f}",
    zmin=-1, zmax=1, textfont={"size":16}
))
fig.update_layout(height=800,width=900)
fig.show()

with open('out.html','w') as f:
    f.write(plot(fig, output_type='div', show_link=False, link_text="", include_plotlyjs=False))

The out.html contents are the ones pasted into a larger HTML file which, when rendered, don’t show the text in the cells. So I’m wondering now if it’s the last line causing the issue? Again, the fig.show() line opens a browser window with the text shown as expected.

Thanks for your help!

9

@shwiftyRick @lcorcodilos was this ever fixed for either of you? I am also having this problem.

I had an app that worked fine in a local dash open source installation but when trying it in dash enterprise I am having the issues same as you.

I will message plotly onpremise support but I wanted to ask here too.

10

Why is this issue still going on? Such a headache!

11

hi @satyndragautam
Can you share your code that generates the error please?