Updating colorscale through clientside_callback

Dash Python
1

Hi everyone, I just wanted to ask if there is a possibility of updating color scale of a figure through client side callback function?

2

Hey,
something like this works:

from dash import dcc, html, Input, Output, State, Dash
import plotly.graph_objects as go

app = Dash(__name__)

app.layout = html.Div([
    html.Button('Click me', id='my-button', n_clicks=0),
    dcc.Graph(id = 'fig', figure = go.Figure(go.Heatmap(x=[1,2,3,4], y=[1,2,3], z= [[1,2,3], [4,5,6], [7,8,9]],
                          colorbar= dict(thickness=20),
                           hovertemplate='%{x}. %{y}<br> %{z:.0f}<extra></extra>', colorscale='Blugrn'))),
    html.Div(id='output-div')
])


app.clientside_callback(
'''
function(n, figure){
    if (!n){
        return dash_clientside.no_update;
    }else{
        console.log(figure)
        figure.data[0]['colorscale']='Peach'
        return JSON.parse(JSON.stringify(figure));
    }
}
''',
    Output('fig', 'figure'),
    Input('my-button', 'n_clicks'),
    State('fig', 'figure'),
    prevent_initial_call = True
)


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