extendData for dcc.Graph subplots

Dash Python
1

I have a Dash app with a dcc.Graph() component. The component has subplots which I would like to update using a callback. The first subplot is a line plot while the second is a heatmap. I need to update the y values in the first and the z values in the second.

The figure is set with:

dcc.Graph(id='spec-waterfall', responsive=True, figure={
    'data': [
        {
            'type': 'line',
            'xaxis': 'x1',
            'yaxis': 'y1',
            'y': spec[0],
        },
        {
            'type': 'heatmap',
            'xaxis': 'x1',
            'yaxis': 'y2',
            'z': spec,
        }
    ],
    'layout': {
        'xaxis1': {
            'anchor': 'y1',
            'domain': [0.0, 1.0],
        },
        'yaxis1':{
            'anchor': 'free',
            'domain': [0.65, 1.0],
            'position': 0.0,
        },
        'yaxis2': {
            'anchor': 'x1',
            'domain': [0.0, 0.55],
        }
    }
})

Where spec is a 2D array. I attempt to update it in a callback with the extendData property since I don’t want to replace the entire figure each time (a lot of data has to be processed - it is preferable to only replace the data instead of the entire figure).

@app.callback(
    [Output("spec-waterfall", "extendData")],
    [Input("my-interval-timer", "n_intervals")],
    prevent_initial_call=True
)
def update_fig(index,spec=spec):
    newLine = # build 1D array of y values for line plot
    newSpec = # build 2D array of z values for heatmap

    updatedData = [dict(y=[newLine], z=[newSpec]), [0,0], [len(newLine), len(newSpec)]]
    return updatedData

But this errors out with the extendData arguments having the wrong shape. Any tips are appreciated!

1 Like