✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
⚡️ Concerned about the grid? Kyle Baranko teaches how to predicting peak loads using XGBoost. Register for the August webinar!

Discerning when a click has occurred when you have both hoverData and clickData inputs in your callback

Is there a way to determine when a click has occurred when you have both hoverData and clickData inputs? The callback will be triggered constantly during mouse movement so there’s no obvious way to discern a click event from a hover event.

I tried putting the clickData input in a separate callback but I need to store the results of it into dcc.Store and apparently only one callback in the app can output into storage–?!? I’m obviously confused about something, because this seems to mean that you can’t modify session state from multiple callback areas in your app–?

In dash you can get the callback_context from which you can get which component was triggered.

import dash


@app.callback(
    Output("myOutput", "property"),
    [Input("myGraph", "hoverData"), Input("myGraph", "clickData")]
)
def do_something(hover, click):
    trigger = dash.callback_context.triggered[0]["prop_id"]
    if trigger == "myGraph.hoverData":
        # Do A
    elif trigger == "myGraph.clickData":
        # Do B
    else: # For the first callback when you didn't click nor hover
        # Do default

Fantastic! This could save me from a mess of coding.

Unfortunately, it appears that clickData is only triggered in a choropleth map when the user clicks on a new object so repeated clicks on the same object only trigger one click. Hmm…