How do I update the color of a marker on click in a Plotly graph object inside a Dash app?

Question

I have a code that creates a Plotly graph made into a grid such that every (x,y) square on the grid is filled with the marker. I want the color of the marker to change when the marker is clicked. I tried using the code here: https://plotly.com/python/click-events/ as an example but when I run my Dash app, the graph isn't clickable (except for the standard interactive tools found in Plotly). The code for my graph is this.

def create_interactive_grid(n):
    x = []
    y = []
    for i in range(n):
        for j in range(n):
            xvalue, yvalue = i, j
            x.append(xvalue + 0.5)
            y.append(yvalue + 0.5)

    fig = go.Figure()
    scatter = go.Scatter(x=x, y=y, marker=dict(size=30, symbol=1, color="blue"), line=dict(width=0),
                         mode='markers')
    fig.add_trace(scatter)

    fig.update_layout(hovermode="closest", clickmode="event", plot_bgcolor="white", width=1000, height=1000,
                      showlegend=False)
    fig.update_yaxes(showgrid=True, gridwidth=1, gridcolor="black", tickvals=[x for x in range(n)],
                     range=[0, n], scaleanchor="x", constrain="domain", showticklabels = False, ticks = "")
    fig.update_xaxes(showgrid=True, gridwidth=1, gridcolor="black", tickvals=[x for x in range(n)],
                     range=[0, n], constrain="domain", scaleanchor="y", showticklabels = False, ticks= "")

    def update_cell(trace, points, selector):
        # take in click
        # change color of marker on visible graph
        c = list(scatter.marker.color)
        for point in points.point_inds:
            c[point] = "black"
            with fig.batch_update():
                scatter.marker.color = c

    scatter.on_click(update_cell)
    return fig

Some other tutorials indicate that I need to use a callback for this, but I'm not sure how I go about implementing that in a multi-page app, since this function isn't in the same file as my app/run scripts or my pages.

Alternatively, since this is more visual than data-oriented, creating a new marker of the new color on the same point (to cover up the old one) would also be acceptable. — user12686540

Coder Coder · Accepted Answer · 2020-12-03T11:01:42

this is js code you can transfert it for python :

updatePlotColor() {
    let update = {'marker.color': this.color};
    PlotlyModule.plotlyjs.restyle("plotDiv", update, 1);
}

where "1" is the number of trace ( if you have only one trace so change 1 to 0 .

How do I update the color of a marker on click in a Plotly graph object inside a Dash app?

1 Answers