[DASH-Line Chart] Showing the last n-element in LineChart


This is part of my code.

x = [1]
y = [1]
app.layout = html.Div(children=[
 dcc.Graph(id='line_graph', figure={
        'data': [
            {**'x': x**, **'y': y**, 'type': 'line', 'name': 'SF'},
        'layout': {
            'title': 'Dash Data Visualization'
    Output('line_graph', 'figure'),
    [Input('interval-component', 'n_intervals')]
def update_metrics(n):
    new_x = trim_to(x, 10)
    new_y = trim_to(y, 10)

    print("after x:%s & y:%s" % (new_x, new_y))

    return {
        "data": [{"x": new_x, "y": new_y}]

I face 2 problems:

  • Even I have returned list < 10 but it seems that this list merged with the current list on the line-graph (assumption). I put a debug message to print list’s length and its size its growing.

  • I found that it is not recommended to declare a global variable that for graphs and or sharing between graph.

Question is:

*How can I show only the let say the last 10 (X, Y) value on the line-chart?
*In the future, we will add another graph that shows the sum of all Y value, how I can share the last Y value with another graph to be added.

thank for any suggestions, any suggestion highly appreciated.

Note: we will show airflow taken from cheap ventilator through serial to combat COVID.


I get the answer of my first question from this link.

But still looking for the second.