Reactive heatmap in streamlit/plotly/streamlit_plotly_events?

Hello all - I’m new to streamlit and to the forum. Looked for this one around and couldn’t find it : I’m trying to build a reactive heatmap in streamlit using plolty - something like where I click on a cell of the heatmap and something happens (like the coordinates are displayed in a text below or whatever). I tried using streamlit_plotly_events but the results are a bit weird - a second dark matrix appears on top of the actual heatmap the former being reactive… I know that’s achievable in other libraries but I’d rather stick to streamlit given how light it is…any help would be very appreciated. Thanks. Code snippet below:

import streamlit as st
import plotly.express as px
from streamlit_plotly_events import plotly_events

z = [[.1, .3, .5, .7, .9],
[1, .8, .6, .4, .2],
[.2, 0, .5, .7, .9],
[.9, .8, .4, .2, 0],
[.3, .4, .5, .7, 1]]

fig = px.imshow(z, text_auto=True, aspect=“auto”)
selected_points = plotly_events(fig, click_event=True)

st.plotly_chart(fig)
st.write(selected_points)

At the moment, getting click events out of plotly charts isn’t natively supported and you’ll need to rely on a custom component like streamlit_plotly_events. However, it’s a hot and popular topic…currently the number one most upvoted on GitHub even.

Check out the roadmap, too.
image

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.