Interactive plot: Get which point a user clicked

🎈 Using Streamlit
,
1

Given there is a scatter plot, would it be possible to make user select the data point on the plot in order to display contents depending on which data point user chose?

Although plotly offeres similar functionality, it only allows me to change the text to display when the cursor is hovered on some point. But I want to display other data like image and data frame too. The explanation does not need to be on the plot like plotly.

Screen Shot 2021-07-03 at 21.55.25
Screen Shot 2021-07-03 at 21.55.25839×486 33 KB

The reproducible code for the image above.

data = load_iris()
df = pd.DataFrame(data.data, columns=data.feature_names)
fig = px.scatter(
    data_frame=df, x="sepal length (cm)", y="sepal width (cm)", title="Sample Data",
)
st.plotly_chart(fig)

# I want to show some contents depending ot what user select on the figure.
st.write("Explanation about the data point user chose.")

As long as similar functionality can be implemented, I don’t care which plot library to use e.g. matplotlib.

Any suggestion or help will be very appreciated. Thank you in advance.

[Info]

  • st version: 0.81.0
  • Python version: 3.9
  • MacOS with Safari and Chrome
2

Hi, I have the exact same problem, Were you able to figure this out ?

3

Hi @Vineeth_Reddy ,

You can use this component for your usecase

Thanks,
Akshansh

3 Likes
4

(post deleted by author)

5

Can one integrate this into streamlit columns: like it is shown in the right column?

6

This changes the theme to black and white. Any thoughts on how to solve this?

7

I solved this by settting color_discrete_sequence

fig = px.scatter(
    data_frame=df,
    x="x",
    y="y",
    color="color_col",
    color_discrete_sequence=['#e41a1c','#377eb8','#4daf4a','#984ea3','#ff7f00','#ffff33','#a65628','#f781bf','#999999'],
    title="Records to Highlight"
)
1 Like