Clickable histogram that link to another plot

Summary

Hey, I could like to make a clickable histogram that can automatically extract the fraction of the data in the histogram and present its distribution for another feature

I have tired this : Catch mouse events on ECharts plots in Streamlit | Introducing streamlit-echarts 0.4.0 - YouTube
However, I would like to know how it can work this more complext dataframe and graph. Similar function can be also seen here: Clickable Bar Chart with Link in Chart JS - YouTube

Hi,
I haven’t tried it myself but perhaps this components would work?

hey lukef,

thank you for the info. i have tried this components, it works fine with bar chart not with histogram. not sure why.

cheers!

Hi,
Sorry for the delay.
I tried it with a histogram and I can get it semi-working:


import streamlit as st
import plotly.express as px
df = px.data.tips()
fig = px.histogram(df, x="total_bill")
fig.write_html("test.html")
from streamlit_plotly_events import plotly_events

selected_points = plotly_events(fig)
st.write(selected_points )

So the code above, if I click one of the bars I get an x and y value.
The x value corresponds to the middle of the bin, while the y value corresponds to the bar height.
Is this what you were after?

Thanks.

Hey LukeF,

Thank you so much for your answer! It works great for me! I think it definely the first step I am looking for. For the next step, I want to find the datapoint connected to the bar I clicked, so I can make further plots for it.

I will also look for solutions on my own, but if you have any good ideas, please let me know.

Cheers!

1 Like

Actually, I have just sloved this issue!
Thanks so much for your help!!

1 Like

Hi. Do you mind to share how you do it? Thanks