Dash callback to update heatmap hover info dynamically

Dash Python
1

Hi, I am trying to update the heatmap hover info, essentially what I want to be able to do is to display the custom string whenever mouse hover on a graph instead of the graph labels. Here’s the code I am trying but it does not work.

app.layout = html.Div(children = [
    html.H1('Dash example'),
    html.Div(id = "my_div"),
    dcc.Graph(id='map',
              figure={
                  'data': [go.Heatmap(
                      z= np.random.rand(4,4),
                      x = x_label,
                      y = y_label,
                      colorscale='Viridis')],
                  'layout': go.Layout(
                          height=700,
                          )
                  },
             ), 
    
    ])

@app.callback(
    dash.dependencies.Output('heatmap', 'figure'),
    [dash.dependencies.Input('map', 'hoverData')])


def update_graph(hoverData):
    return {
        'data':[go.heatmap(
        x = 'ab',
        y = 'cd',
        text = 'CC'
        )]
        
    }

I am able to return the custom text to the html div element but I would like to be able to update the mouse hover. Please let me know if there is a way to do this. Thanks

2

Hi, could you please post here a standalone example? In the example here you don’t have the Component of id heatmap defined, so it’s hard to understand what you would like to do. Thank you :slight_smile:

3

Hi @Emmanuelle, thank you for looking into it. I have a typo in my post, what I would like to do is update the hover event to show the custom text instead of the labels and the cell value. Here’s the corrected code. I would like to update the same graph on every mouse hover event with the custom text. Thanks :slightly_smiling_face:

app.layout = html.Div(children = [
    html.H1('Dash example'),
    html.Div(id = "my_div"),
    dcc.Graph(id='map',
              figure={
                  'data': [go.Heatmap(
                      z= np.random.rand(4,4),
                      x = x_label,
                      y = y_label,
                      colorscale='Viridis')],
                  'layout': go.Layout(
                          height=700,
                          )
                  },
             ), 
    
    ])

@app.callback(
    dash.dependencies.Output('map', 'figure'),
    [dash.dependencies.Input('map', 'hoverData')])


def update_graph(hoverData):
    return {
        'data':[go.heatmap(
        x = 'ab',
        y = 'cd',
        text = 'CC'
        )]
        
    }
4

Hum, the example is not standalone yet, you cannot create a Heatmap with x argument 'ab'. But if you want to replace the hover information by a given text, you can use the hovertemplate argument of the trace, like

import plotly.graph_objects as go
import numpy as np
fig = go.Figure(data = go.Heatmap(z=np.random.random((4, 4)), hovertemplate='my text'))
fig.show()

Hope this helps.

5

Thank you @Emmanuelle, sorry for bothering you. Lets say that I want to create a heatmap and then use the dash callbacks to update the hover annotations to display the custom text. is it possible