Hi, There seems to be a problem with integration between panel and plotly when receiving click event upon clicking on the bar in the plotly graph. Usually the event is only triggered when clicking in the space between the bars and not inside the Bar. if sizing_mode is not used, situation gets even worse. Not sure it this is a bug or some missing configuration.
A similar code using dash and plotly works fine.
panel code:
# run as: panel serve app.py --autoreload
import plotly.express as px
import pandas as pd
import panel as pn
df = pd.DataFrame(data = {'month':['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],'value':[10,15,20,5,12,6,21,8,9,3,11,17]})
fig=px.bar(x=df['month'], y=df['value'])
def on_click(event):
if event.name == 'click_data':
if event.obj is not None:
print("on_click", event.obj.click_data)
print("on_click old", event.old)
print("on_click new", event.new)
plot_panel = pn.pane.Plotly(fig,
config={"responsive": True},
sizing_mode="scale_both"
)
plot_panel.param.watch(on_click, ["click_data"],onlychanged=False)
pn.Column(plot_panel).servable()
dash code:
app = dash.Dash(__name__)
app.layout = dhtml.Div([
dcc.Graph(
id='graph',
figure=fig,
style={'marginTop': '20px'},
),
dhtml.Div(id="where")
])
@app.callback(
Output("where", "children"),
Input("graph", "clickData"))
def display_click_data(clickData):
return json.dumps(clickData, indent=2)
if __name__ == '__main__':
app.run_server(debug=True)