What is the correct way of using extendData in dcc.Graph?

Dash Python
1

I am trying to limit the number of points that are graphed by the dcc.Graph figure with the following code:

import dash
import dash_html_components as html
import dash_core_components as dcc
import numpy as np

from dash.dependencies import Input, Output, State

# Example data (a circle).
resolution = 1000
t = np.linspace(0, np.pi * 2, resolution)
x, y = np.cos(t), np.sin(t)
# Example app.
figure = dict(data=[{'x': [], 'y': []}])
app = dash.Dash(__name__, update_title=None)  # remove "Updating..." from title
app.layout = html.Div([
    dcc.Graph(id='graph', figure=dict(figure)), dcc.Interval(id="interval", interval=10),
    dcc.Store(id='store', data=dict(x=x, y=y, resolution=resolution)),
])
app.clientside_callback(
    """
    function (n_intervals, data) {
        return [{x: [data.x], y: [data.y]}, [0], 10]
    }
    """,
    [Output('graph', 'extendData')],
    [Input('interval', 'n_intervals')], 
    [State('store', 'data')]
)

if __name__ == '__main__':
    app.run_server()

What I would expect, that when I use return [{x: [data.x], y: [data.y]}, [0], 10] , the 10 at the end limits the number of points on the graph to 10. Although, when I run the sample code, a full circle is drawn. According to the documentation, extendData requires the following return:

extendData (list | dict; optional): Data that should be appended to existing traces. Has the form [updateData, traceIndices, maxPoints], where updateData is an object containing the data to extend, traceIndices (optional) is an array of trace indices that should be extended, and maxPoints (optional) is either an integer defining the maximum number of points allowed or an object with key:value pairs matching updateData Reference the Plotly.extendTraces API for full usage: Function reference in JavaScript

Am I misunderstanding the use of the maxPoints parameter, or am I implementing it wrong?

1 Like