Plotly click events in streamlit

🎈 Using Streamlit
1

I am using streamlit library for simple dashboard. Is it possible to use plotly click events in streamlit. Is there any other way to get click events on bar chart, scatter plots, etc, in streamlit?

The code that i tried :

import plotly.graph_objects as go
import streamlit as st
import numpy as np

def update_point(trace, points, state):
print(trace, points, state)

def main():
np.random.seed(1)
x = np.random.rand(10)
y = np.random.rand(10)
f = go.FigureWidget([go.Scatter(x=x, y=y)])
s = f.data[0]

st.plotly_chart(f)
s.on_click(update_point)

if name == ‘main’:
main()

3 Likes
2

Hi @sandesh_more

That kind of interactivity is currently not supported. See https://github.com/streamlit/streamlit/issues/455

3

Thanks for the reply.

4

Hi, I see this thread was created in 2019, I just wanted to know if there have been updates on this matter? i.e. using go.FigureWidget and get outputs from graph selection?

1 Like
5

New functionality!

7 Likes
6

How can I return the min, max X values from a selection?

1 Like
7

Does this support the use_container_width argument when displaying the figure?

1 Like
8

Hi, I have added this event somewhere in between my Streamlit dashboard for a specific visual. The code would not run beyond that specific visual in the first go until I click on it and create a streamlit event, only then the rest of the visuals would get displayed. Can anyone help with it?

9

Does it support

use_container_width

?

10

Yes, st.plotly_chart contains a boolean use_container_width parameter:

1 Like
11

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

2 Likes
12

@R_D , can you explain your problem more? Maybe post some screenshots and some code?

13

Hey, ran into the same issue and figured out what’s wrong. Looks like the recent streamlit update is trying to managing plotly’s color. As a result all the color will show up as black unless you use streamlit’s plotly_chart method.

Here is the thread talking about the exact same issue.

Hopefully streamlit will fix this. In the mean time if you explicit set plotly line color (might have to use plotly’s graph_object interface) the color will appear correctly.

1 Like
14

Hi @Kevin1 ,

Thanks for pointing out this out. I hadn’t noticed this and I wish I had earlier.

If you wish to change the colors to the plotly colors instead of the black,

you can put this in your script:

import plotly.io as pio
pio.templates.default = "plotly"

You can test this out by changing the colors in the underlying script to whatever. Right now in the script, they are streamlit colors.

import plotly.io as pio
import streamlit as st
import plotly.express as px

pio.templates.default = "plotly"

df = px.data.tips()
fig = px.scatter(
    df,
    x="total_bill",
    y="tip",
    color="day",
    color_discrete_sequence=[
        "#0068c9",
        "#83c9ff",
        "#ff2b2b",
        "#ffabab",
        "#29b09d",
        "#7defa1",
        "#ff8700",
        "#ffd16a",
        "#6d3fc0",
        "#d5dae5",
    ],
    title="streamlit colors",
)
st.plotly_chart(fig)
1 Like
15

Hi, This discussion was very helpful! Thanks all!
I have a quick question, I am using Plotly-events for capturing user selection from a bar chart but I want to reset this selection to null when my streamlit dashboard reloads. How can I make this happen? Thanks.

1 Like
16

Hi, any update regarding getting the clicked point from a plotly chart?
The work around of using plotly-events doesn’t work well after streamlit 1.12.0.
Thanks!

2 Likes
17

I am also facing problems regarding this, did you find any fixes?