Black Lives Matter. Please consider donating to Black Girls Code today.

No click event detected for bar charts

Hello,

I have a simple bar chart and I try to detect clicks on bars:

app.layout = dhtml.Div([
    dhtml.Div(id='test'),
    dcc.Graph(
        id='graph',
        figure={'data': []}, # Filled in a callback
    ),
])

@app.callback(Output("test", "children"), [Input("graph", "clickData")])
def event_cb(data):
    print(data)
    return ''

Unfortunately, this callback is never called. When I replace “clickData” by “selectedData”, as illustrated in the Uber example, it works.

Thanks.

Hi, and thanks for writing in.

This should be working, it’s unclear why the clickData isn’t working. Might be something with the callback feeding graph

Can you try building a version of this with toy data to see if you’re still not registering click events? I would use the app here as a template: https://dash.plot.ly/interactive-graphing

Just replace the graph with a bar chart, and otherwise display the clickData objects. If that’s working, then the issue must be elsewhere in the app.

Thanks for the rapid response. It works with a basic example (see below). I will investigate further for my special case.

import json

import dash
import dash_core_components as dcc
import dash_html_components as dhtml
from dash.dependencies import Input, Output

import plotly.graph_objs as go


app = dash.Dash(__name__)

app.layout = dhtml.Div([
    dhtml.Div(id='output'),
    dcc.Slider(
        id='slider',
        min=0,
        max=3,
        value=0,
        marks={i: str(i) for i in range(4)},
    ),
    dcc.Graph(
        id='graph',
        figure={'data': []},
        style={'marginTop': '20px'},
    ),
])

@app.callback(
    Output('graph', 'figure'),
    [Input('slider', 'value')])
def build_graph(v):
    return go.Figure(data=[
        go.Bar(
            x=['x1', 'x2'],
            y=[1, v]
        )
    ])

@app.callback(
    Output('output', 'children'),
    [Input('graph', 'clickData')])
def display_click_data(clickData):
    return json.dumps(clickData, indent=2)


if __name__ == '__main__':
    app.run_server(debug=True)

I found the bug. No click signal is sent when hoverinfo='skip':

@app.callback(
    Output('graph', 'figure'),
    [Input('slider', 'value')])
def build_graph(v):
    return go.Figure(data=[
        go.Bar(
            x=['x1', 'x2'],
            y=[1, v],
            hoverinfo='skip',
        )
    ])

Is it expected? If so, it should be mentioned in the docs.

Thanks.

1 Like