How to acess / listen to the click event of a ´pn.pane.Plotly´?

Panel
1

Let’s suppose having a plot in a Plotly pane. I want to execute a handler when the user clicks the legend of the plot. According to the Documentation, watching the click_data parameter should be the way to go, however nothing is happening for me there.

import panel as pn
import numpy as np
import plotly.graph_objs as go
import param
pn.extension("plotly")

class Plot(param.Parameterized):
    def __init__(self):
        x = np.linspace(0, 10, 100)
        y1 = np.sin(x) 
        y2 = np.cos(x) 
        
        scatter1 = go.Scatter(x=x, y=y1, mode='lines', name='Series 1 (sin)', line=dict(color='blue'))        
        scatter2 = go.Scatter(x=x, y=y2, mode='lines', name='Series 2 (cos)', line=dict(color='green'))

        fig = go.Figure(data=[scatter1, scatter2], layout=go.Layout(title='Two Series Plot'))
        self.plot = pn.pane.Plotly(fig)
        self.plot.param.watch(self.__legend_click_handler__, "click_data")
    
    def __legend_click_handler__(self, event):
        print(event) # nothing is happening here, why?
    
    @property
    def ui(self):
        return pn.Row(self.plot)
    
plot = Plot()
plot.ui

image
image834×472 31 KB

2

restyle_data needs to be used.

Fixed code:

import panel as pn
import numpy as np
import plotly.graph_objs as go
import param
pn.extension("plotly")

class Plot(param.Parameterized):
    plot = pn.pane.Plotly()
    def __init__(self):
        x = np.linspace(0, 10, 100)
        y1 = np.sin(x) 
        y2 = np.cos(x) 
        
        scatter1 = go.Scatter(x=x, y=y1, mode='lines', name='Series 1 (sin)', line=dict(color='blue'))        
        scatter2 = go.Scatter(x=x, y=y2, mode='lines', name='Series 2 (cos)', line=dict(color='green'))

        fig = go.Figure(data=[scatter1, scatter2], layout=go.Layout(title='Two Series Plot'))
        self.plot.object = fig
        self.plot.param.watch(self.__legend_click_handler__, "restyle_data")
    
    def __legend_click_handler__(self, restyle_data):
        print(restyle_data)
    
    @property
    def ui(self):
        return pn.Row(self.plot)
    
my_plot = Plot()
my_plot.ui

This will log to the console:

image
image1266×293 25.5 KB