Is it possible to update just `layout`, not whole `figure` of Graph in callback?

Dash Python
14

Simplified Example

app.py

import dash
import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Input, Output, ClientsideFunction

app = dash.Dash(__name__)

fig_data = {
    "data": [{"type": "bar", "x": [1, 2, 3], "y": [1, 3, 2]}],
    "layout": {"title": {"text": ""}}
}

app.layout = html.Div([
    dcc.Store("fig-data", data=fig_data),
    dcc.Dropdown(
        id="city",
        options=[ {'label': z, "value": z} for z in ["Sydney", "Montreal"] ],
        value="Sydney"
    ),
    dcc.Graph(id="graph")
])

app.clientside_callback(
    ClientsideFunction("clientside", "figure"),
    Output(component_id="graph", component_property="figure"),
    [Input("fig-data", "data"), Input("city", "value")],
)

app.run_server(host="0.0.0.0", debug=True)

/assets/clientside.js

if (!window.dash_clientside) {
     window.dash_clientside = {}
 }

window.dash_clientside.clientside = {

    figure: function (fig_dict, title) {

        if (!fig_dict) {
            throw "Figure data not loaded, aborting update."
        }

        // Copy the fig_data so we can modify it
        // Is this required? Not sure if fig_data is passed by reference or value
        fig_dict_copy = {...fig_dict};

        fig_dict_copy["layout"]["title"] = title;

        return fig_dict_copy

    },

}

Choropleth Example

This example is a bit more involved so I put it in a repl.it

1 Like