Click events in python plotly-dash Scatterpolar plot

Question

I'd like to create two web pages which contain iframed plotly-dash graphs. I'd like to implement click events of the first graph to redirect to the other page (with more info about that specific datum)

I followed this guide, but the click event is not triggered in my setup even when I installed ipywidgets, node.js and plotlywidgets extension to the python venv I'm running it in. There is a note in the exaple above:

Note: Callbacks will only be triggered when the trace belongs to a instance of plotly.graph_objs.FigureWidget and it is displayed in an ipywidget context. Callbacks will not be triggered on figures that are displayed using plot/iplot.

The example is using the FigureWidget and I'm drawing it by passing the figure to dcc.Graph which should be the same as fig.show(). The whole code looks like this

import plotly.graph_objects as go
import numpy as np
np.random.seed(1)

x = np.random.rand(100)
y = np.random.rand(100)

fig = go.FigureWidget([go.Scatter(x=x, y=y, mode='markers')])

scatter = fig.data[0]
colors = ['#a3a7e4'] * 100
scatter.marker.color = colors
scatter.marker.size = [10] * 100
fig.layout.hovermode = 'closest'


# create our callback function
def update_point(trace, points, selector):
    c = list(scatter.marker.color)
    s = list(scatter.marker.size)
    for i in points.point_inds:
        c[i] = '#bae2be'
        s[i] = 20
        with fig.batch_update():
            scatter.marker.color = c
            scatter.marker.size = s


scatter.on_click(update_point)

import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash()
app.layout = html.Div([
    dcc.Graph(figure=fig)
]) 

app.run_server(debug=True, use_reloader=False)

I don't know how to make/be sure that it is displayed in ipywidget context though.

I'm aware of a workaround like this with layout.clickmode = select and a separate button, but I'd like to make the figure's on_click() events working.

Could someone please help me to make this work?

raphaelts · Accepted Answer · 2021-09-07 15:30:10Z

2

Regarding this part of the documentation:

in an ipywidget context

It means that this will only work in a jupyter notebook for example.

If you wish to have this kind of graph interaction when using dash, you should use the dcc.Graph attributes to fire your callbacks (hoverData, clickData, selectedData, relayoutData).

See more here: Interactive Visualizations

answered Sep 7, 2021 at 15:30

raphaelts

3915 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Click events in python plotly-dash Scatterpolar plot

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related