# Interactive Plotly Heatmap

**URL:** <https://community.plotly.com/t/interactive-plotly-heatmap/79825>\
**Category:** plotly.js\
**Tags:** question\
**Created:** [November 2, 2023, 9:35pm UTC](https://community.plotly.com/t/interactive-plotly-heatmap/79825 "2023-11-02T21:35:42Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![tinanemati](https://avatars.discourse-cdn.com/v4/letter/t/ccd318/32.png) [@tinanemati](https://community.plotly.com/u/tinanemati)\
**Post date:** [November 2, 2023, 9:35pm UTC](https://community.plotly.com/t/interactive-plotly-heatmap/79825/1 "2023-11-02T21:35:42Z")

</div>

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](https://github.com/chriddyp/interactive-heatmaps), but I have a hard time understanding the code, and also the Demo doesn’t work. Can anyone help me, please?

Thanks!

---

<div class="post-metadata">

**Author:** ![AIMPED](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/aimped/32/21758_2.png) [@AIMPED](https://community.plotly.com/u/AIMPED)\
**Post date:** [November 2, 2023, 9:58pm UTC](https://community.plotly.com/t/interactive-plotly-heatmap/79825/2 "2023-11-02T21:58:14Z")

</div>

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.

> **[Dash in 20 Minutes Tutorial | Dash for Python Documentation | Plotly](https://dash.plotly.com/tutorial)**
>
> A Dash tutorial that shows you how to create a Dash app in 20 minutes.

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

---

<div class="post-metadata">

**Author:** ![tinanemati](https://avatars.discourse-cdn.com/v4/letter/t/ccd318/32.png) [@tinanemati](https://community.plotly.com/u/tinanemati)\
**Post date:** [November 2, 2023, 10:20pm UTC](https://community.plotly.com/t/interactive-plotly-heatmap/79825/3 "2023-11-02T22:20:26Z")

</div>

Hi @AIMPED!

Thank you for the warm welcome and sharing the information with Dash 🙂 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](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](https://github.com/chriddyp/interactive-heatmaps#interactively-view-x-y-slices-through-heatmaps-and-contour-plots)  
plotly documentation link: [Heatmaps in JavaScript](https://plotly.com/javascript/heatmaps/)

---

<div class="post-metadata">

**Author:** ![tinanemati](https://avatars.discourse-cdn.com/v4/letter/t/ccd318/32.png) [@tinanemati](https://community.plotly.com/u/tinanemati)\
**Post date:** [November 2, 2023, 10:29pm UTC](https://community.plotly.com/t/interactive-plotly-heatmap/79825/4 "2023-11-02T22:29:25Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![AIMPED](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/aimped/32/21758_2.png) [@AIMPED](https://community.plotly.com/u/AIMPED)\
**Post date:** [November 3, 2023, 7:54am UTC](https://community.plotly.com/t/interactive-plotly-heatmap/79825/5 "2023-11-03T07:54:43Z")

</div>

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

Maybe other users can chime in.

---

<div class="post-metadata">

**Author:** ![RenaudLN](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/renaudln/32/9041_2.png) [@RenaudLN](https://community.plotly.com/u/RenaudLN)\
**Post date:** [November 5, 2023, 9:03pm UTC](https://community.plotly.com/t/interactive-plotly-heatmap/79825/6 "2023-11-05T21:03:22Z")

</div>

@tinanemati Are you looking for the Plotly JavaScript docs for heatmaps? [Heatmaps in JavaScript](https://plotly.com/javascript/heatmaps/)
