How to show text on a heatmap with Plotly?

Question

I am trying to show the z items as text on a Plotly heatmap. I am using the latest version (5.5.0) and following the exact example shown on the Plotly Heatmaps webpage (https://plotly.com/python/heatmaps/), see the section "Text on Heatmap Points" near the bottom.

My code is their example code, which is:

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}
                                       )
                      )

When I render my app in a webpage, what I see is this:

But on their site it shows with the labels:

I don't get any errors when I run my app, and the labels do indeed show when I hover over the heatmap, but the text is not displaying on the heatmap as it should. Since I'm using their exact example, I don't understand what could be going wrong. Any thoughts?

[EDIT]: It seems like this might be an issue with Dash. When I run the example interactively, I do indeed get the text labels. But my application is part of a Dash app, and that is where I am not seeing the rendered labels.

The official reference you refer to as an example has a code for annotations, but your code does not. text=[['one',...]] , please add it. — r-beginners, Dec 29 '21 at 03:02
I do have that, I just shortened it to make the question posted here a little easier to read. You can see that I have the same number of strings referenced as the example in the same list-of-lists format. — K-83Rick, Dec 29 '21 at 07:01
This does indeed work as expected when run interactively. The issue arises when trying to achieve the same in a Dash app. I have added an edit statement to my question that clarifies this. — K-83Rick, Dec 29 '21 at 17:51

Rob Raymond · Accepted Answer · 2021-12-29T19:07:53.737

This is a new feature in 5.5.0 https://github.com/plotly/plotly.py/releases. After installing and restarting my jupyter kernel, this did not work. Required restart of complete jupyter environment
the documented example using go https://plotly.com/python/heatmaps/#text-on-heatmap-points plus note in release notes auto_text parameter, I explored this.
below shows use of px and also go by adding numbers as text as well


import plotly.express as px
import plotly.graph_objects as go
import inflect

p = inflect.engine()
df = px.data.medals_wide(indexed=True)
fig = px.imshow(df, text_auto=True)
fig2 = go.Figure(fig.data, fig.layout)
fig2 = fig2.update_traces(text=df.applymap(p.number_to_words).values, texttemplate="%{text}", hovertemplate=None)

fig.show()
fig2.show()

dash

see https://dash.plotly.com/external-resources Controlling the Plotly.js Version Used by dcc.Graph
dash 2.0.0 is packaged with a version of plotly.js that does not yet support texttemplate
code below shows how to override

import numpy as np
import dash
import plotly.graph_objects as go
import plotly.express as px
from dash.dependencies import Input, Output, State
from jupyter_dash import JupyterDash
import inflect

# Build App
app = JupyterDash(__name__, external_scripts=["https://cdn.plot.ly/plotly-2.8.3.min.js"])
app.scripts.config.serve_locally = False
app.layout = dash.html.Div(
    [
        dash.dcc.Interval(id="run", max_intervals=1),
        dash.dcc.Graph(id="fig"),
    ]
)


def hm():
    p = inflect.engine()
    df = px.data.medals_wide(indexed=True)
    fig = px.imshow(df, text_auto=True)
    fig2 = go.Figure(fig.data, fig.layout)
    fig2 = fig2.update_traces(
        text=df.applymap(p.number_to_words).values,
        texttemplate="%{text}",
        hovertemplate=None,
    )
    return fig2.update_layout(title=f"dash: {dash.__version__}")


@app.callback(Output("fig", "figure"), Input("run", "n_intervals"))
def createFig(n):
    return hm()


# Run app and display result inline in the notebook
app.run_server(mode="inline")

Thank you for this. I agree that this works as intended when run interactively. However, this does not work as expected when implemented in Dash. I added an edit statement to my question that clarifies this. — K-83Rick, Dec 29 '21 at 17:50
updated - similar issue that I had with jupyter. Have to use right version of plotly JS library — Rob Raymond, Dec 29 '21 at 19:09

How to show text on a heatmap with Plotly?

1 Answers1

dash