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?

Thanks!

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.

Hi @AIMPED!

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: https://github.com/plotly/dash-component-boilerplate
example link of an interactive heatmap: https://github.com/chriddyp/interactive-heatmaps#interactively-view-x-y-slices-through-heatmaps-and-contour-plots
plotly documentation link: Heatmaps in JavaScript

I’m sorry, this was also one of the links I used: https://plotly.com/javascript/react/

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