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

📊 Plotly Python
1

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.

2

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
3

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

1 Like
4

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.