Interactive Plotly Heatmap

Hi Everyone!

I’m a new Plotly user and have used plotly.js in a React application. I was wondering if there is any way that we make a heatmap graph in Plotly interactive?? For example, Interactively view x, and y slices through heatmaps and contour plots?

I found this example, but I have a hard time understanding the code, and also the Demo doesn’t work. Can anyone help me, please?


Hi @tinanemati welcome to the community!

I would use dash for these kind of interactivity.

You could take a look at this tutorial to start with to get an idea.

Once you understand the basic concepts, you can get creative with the level of interactivity.


Thank you for the warm welcome and sharing the information with Dash :slight_smile: I have actually worked with Dash before and have created a Plotly Dash component using the react boilerplate link below. However, when I was working on my heatmap component, I could not find good documentation on how to use the plotly.js library and make it interactive. I found an example of an interactive heatmap on github, but it also seems to not have clear documentation. Is there another source where I can look at with better documentation by any chance?

boilerplate Github link:
example link of an interactive heatmap:
plotly documentation link: Heatmaps in JavaScript

I’m sorry, this was also one of the links I used:

I’m sorry for my ignorance. Unfortunately my JS skills are not sufficient to help you.

Maybe other users can chime in.

@tinanemati Are you looking for the Plotly JavaScript docs for heatmaps? Heatmaps in JavaScript