How to show text on a heatmap with Plotly?

user_4932542 0
Viewed 3938

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: enter image description here

But on their site it shows with the labels: enter image description here

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.

plotly-python plotly-dash plotly heatmap python
1 Answers

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

enter image description here

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")
user_94414040
Related