Click Events in Python

Click Events With FigureWidget

New to Plotly?

Plotly is a free and open-source graphing library for Python. We recommend you read our Getting Started guide for the latest installation or upgrade instructions, then move on to our Plotly Fundamentals tutorials or dive straight in to some Basic Charts tutorials.

Update Points Using a Click Callback¶

In [1]:

import plotly.graph_objects as go

import numpy as np
np.random.seed(1)

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

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

scatter = f.data[0]
colors = ['#a3a7e4'] * 100
scatter.marker.color = colors
scatter.marker.size = [10] * 100
f.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 f.batch_update():
            scatter.marker.color = c
            scatter.marker.size = s


scatter.on_click(update_point)

f

Out[1]:

Reference¶

See these Jupyter notebooks for even more FigureWidget examples.

In [2]:

import plotly.graph_objects as go
f = go.FigureWidget([go.Scatter()])
help(f.data[0].on_click)

Help on method on_click in module plotly.basedatatypes:

on_click(callback, append=False) method of plotly.graph_objs._scatter.Scatter instance
    Register function to be called when the user clicks on one or more
    points in this trace.
    
    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.
    
    Parameters
    ----------
    callback
        Callable function that accepts 3 arguments
    
        - this trace
        - plotly.callbacks.Points object
        - plotly.callbacks.InputDeviceState object
    
    append : bool
        If False (the default), this callback replaces any previously
        defined on_click callbacks for this trace. If True,
        this callback is appended to the list of any previously defined
        callbacks.
    
    Returns
    -------
    None
    
    Examples
    --------
    
    >>> import plotly.graph_objects as go
    >>> from plotly.callbacks import Points, InputDeviceState
    >>> points, state = Points(), InputDeviceState()
    
    >>> def click_fn(trace, points, state):
    ...     inds = points.point_inds
    ...     # Do something
    
    >>> trace = go.Scatter(x=[1, 2], y=[3, 0])
    >>> trace.on_click(click_fn)
    
    Note: The creation of the `points` and `state` objects is optional,
    it's simply a convenience to help the text editor perform completion
    on the arguments inside `click_fn`

What About Dash?¶

Dash is an open-source framework for building analytical applications, with no Javascript required, and it is tightly integrated with the Plotly graphing library.

Learn about how to install Dash at https://dash.plot.ly/installation.

Everywhere in this page that you see fig.show(), you can display the same figure in a Dash application by passing it to the figure argument of the Graph component from the built-in dash_core_components package like this:

import plotly.graph_objects as go # or plotly.express as px
fig = go.Figure() # or any Plotly Express function e.g. px.bar(...)
# fig.add_trace( ... )
# fig.update_layout( ... )

from dash import Dash, dcc, html

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

app.run_server(debug=True, use_reloader=False)  # Turn off reloader if inside Jupyter