Is it possible to capture a click on an indicator?


I have some indicators on a dash and I was wondering if it’s possible to detect when they are clicked on?

My indicators are built like so:

@app.callback(Output("cpi", "figure"),
               [Input("area", "value")])
def cpi_indicator(area):


layout = dict(paper_bgcolor="white", plot_bgcolor="white", margin=dict(l=0, r=0, t=0, b=0, pad=0))

    data = go.Indicator(value=this_month, mode="number+delta", delta=dict(reference=delta,
    increasing=dict(color="#231f20", symbol=''), decreasing=dict(color="#231f20", symbol=''), relative=False, valueformat=",."),
    number={"font" : dict(color=color), "valueformat": ",."})

    indicator = go.Figure(data=data, layout=layout)

return indicator

And I have tried a callback like this:

@app.callback(Output("test", "children"),
               [Input("cpi", "n_clicks")])
def cpi_indicator(n_clicks):

    if n_clicks != None:
        return "test"

But the callback is not being called?

Any body have any ideas on this?

I’m just a beginner so there is probably a better way, but you can add a n_clicks = 0 to any dash_html_components element that will allow you to register a callback on the n_clicks property. Maybe wrap your ‘cpi’ Graph element in a Div and set the n_clicks=0 on the Div and register the callback on that Div?

Hi @Chris369, n_clicks is a property of an html.Button but for a dcc.Graph you should listen to clickData instead, as explained in

Thanks both.

The n_clicks on the Div that the indicator is within works really well in my case, as it means the user can click on the indicator or the text label next to it :+1: