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