Black Lives Matter. Please consider donating to Black Girls Code today.

Heatmap: possibility to create callbacks based on what cell in the heatmap the user is clicking on?

Hello everyone,

I’m new to Dash but so far I have been able to make a heatmap with different callbacks such as selector, range slider, etc and even combined the interactions with each other.
Now I need to go a step further.

Is it possible in Dash for the user to click on a cell in the heatmap and use this as input for another callback function? For example, I want the user to click on a cell and this needs to update another Network figure to the corresponding position in the heatmap.

I was also wondering whether it is possible in Dash to grey out certain values inside the heatmap. So only the cells the user has clicked on stay colored. I can’t change the value to np.nan because I need these values to stay blank and I also cannot use 0 values, since the dataset also contains these to be colored like they are based on the colour scale.

Hi, you can use clickData functionality of dash pertaining callback to select the cell and based on that you can update your graph, table etc. Below is code snippet which i use in one of my project.

@app.callback(Output('table','figure'),
              [Input('som','clickData')])

def update_table(clickData):
    xnode = clickData['points'][0]['x']
    ynode = clickData['points'][0]['y']

clickdata return a json format output. You need to grab correct coordinates for interaction.

1 Like

For your 2nd question you can add hoverongaps = False in your heatmap to highlight missing value

1 Like

Thank you so much for the quick replies! I looked into clickData and I think after some research I can manage now :smiley: Didn’t know it existed before.

For the second issue, I solved my problem by adding a second trace to the heatmap and setting all values I do not want to be changed to NaN and the rest colored based on it’s own colourscale which is hidden.