Referencing/Updating Trace by Curve Number

Dash Python
1

I am writing a dashboard with several traces of different kinds in different subplots. I am trying to change the color of the trace that the user clicks on. I am using a callback that gets clickData from the figure component, and I can access the curveNumber. I am able to reference the current color like so app.layout['algorithm-output'].figure['data'][click_data['points'][0].get('curveNumber')]['line']['color'] where 'algorithm-output’ is the id of the graph component that I am modifying. However, I’m sure how I can use this number (or any of the other values that come with the clickData property) to update the trace in a new figure that I can return to the Output() in the callback decorator. What is the best way of going about doing this?

2

Hi @eugeneh1217,

Here’s a callback that can do what you want (change trace color on click):

@app.callback(
    Output("graph", "figure"),
    Input("graph", "clickData"),
    State("graph", "figure")
)
def update_trace_color(click_data, figure):

    if not click_data:
        raise dash.exceptions.PreventUpdate

    curveNumber = click_data["points"][0]["curveNumber"]

    figure['data'][curveNumber]['line']['color'] = "#FFF555" # new color
    
    return figure

Note that clicking in other traces will change the to the same color as this one, so you need to reset the color of the previous selection in the same callback.

Hope that this helps!

3

Hi @jlfsjunior ,

I did end up coming to the same conclusion a few days after I posted this question (and ran into/solved the same issue with double clicks), but it’s good to have some assurance that this is the best way to go about it.

Thanks!