# Issue with patch update in dash with visualisation

**URL:** <https://community.plotly.com/t/issue-with-patch-update-in-dash-with-visualisation/85769>\
**Category:** Dash Python\
**Tags:** question\
**Created:** [July 12, 2024, 2:16pm UTC](https://community.plotly.com/t/issue-with-patch-update-in-dash-with-visualisation/85769 "2024-07-12T14:16:38Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![ksuryateja24](https://avatars.discourse-cdn.com/v4/letter/k/9f8e36/32.png) [@ksuryateja24](https://community.plotly.com/u/ksuryateja24)\
**Post date:** [July 12, 2024, 2:16pm UTC](https://community.plotly.com/t/issue-with-patch-update-in-dash-with-visualisation/85769/1 "2024-07-12T14:16:38Z")

</div>

Hi,

I am trying to use patch update for dynamic update of plots, but I am encountering a visualisation issue.

There is some initial data on plot.

 ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/8/d/8d82aff16559be30ba50f35d24fc8db328f0ea5c.png)

When clicked on append btn, there is a callback which does a patch update. Instead of continuing the same line, it creates a new trace line

 ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/7/6/76c649c6e1443861e448f716850b7c7959cd3aaf.png)

I have attached the code as well. Is there something that I missed?

```auto
from dash import Dash, html, dcc, Input, Output, Patch, callback, State
import plotly.graph_objects as go
from plotly.subplots import make_subplots
import datetime
import random

app = Dash( __name__ )

# Create a subplot with 2 rows and 1 column
fig = make_subplots(rows=2, cols=1, shared_xaxes=True)

# Initialize the figure with some default data
initial_x = [datetime.datetime.now() - datetime.timedelta(minutes=i) for i in range(5)]
initial_y1 = [random.randrange(1, 30, 1) for _ in range(5)]
initial_y2 = [random.randrange(1, 30, 1) for _ in range(5)]
initial_y3 = [random.randrange(1, 30, 1) for _ in range(5)]
initial_y4 = [random.randrange(1, 30, 1) for _ in range(5)]

fig.add_trace(go.Scatter(x=initial_x, y=initial_y1, mode='lines+markers', name='Trace 1.1'), row=1, col=1)
fig.add_trace(go.Scatter(x=initial_x, y=initial_y2, mode='lines+markers', name='Trace 1.2'), row=1, col=1)
fig.add_trace(go.Scatter(x=initial_x, y=initial_y3, mode='lines+markers', name='Trace 2.1'), row=2, col=1)
fig.add_trace(go.Scatter(x=initial_x, y=initial_y4, mode='lines+markers', name='Trace 2.2'), row=2, col=1)
# print(fig)

app.layout = html.Div(
    [
        html.Button("Append", id="append-new-val"),
        dcc.Graph(figure=fig, id="append-example-graph"),
    ]
)

@callback(
    Output("append-example-graph", "figure"),
    Input("append-new-val", "n_clicks"),
    State("append-example-graph","figure"),
    prevent_initial_call=True,
)
def add_data_to_fig(n_clicks,fig1):
    current_time = datetime.datetime.now()
    
    # Generate random values for each trace
    random_values = [random.randrange(1, 30, 1) for _ in range(4)]
    
    patched_figure = Patch()
    
    # Update first subplot, first trace
    patched_figure["data"][0]["x"].append(current_time)
    patched_figure["data"][0]["y"].append(random_values[0])
    # patched_figure["data"][0]["mode"]= 'markers'
    
    # Update first subplot, second trace
    patched_figure["data"][1]["x"].append(current_time)
    patched_figure["data"][1]["y"].append(random_values[1])
    
    # Update second subplot, first trace
    patched_figure["data"][2]["x"].append(current_time)
    patched_figure["data"][2]["y"].append(random_values[2])
    
    # Update second subplot, second trace
    patched_figure["data"][3]["x"].append(current_time)
    patched_figure["data"][3]["y"].append(random_values[3])
    # print('')
    # print(fig1)
    
    return patched_figure

if __name__ == " __main__":
    app.run(debug=True)

```

FYI, Plotly version is 2.17.1 and python version is 3.11.5

Thanks in advance

---

<div class="post-metadata">

**Author:** ![adamschroeder](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/adamschroeder/32/17280_2.png) [@adamschroeder](https://community.plotly.com/u/adamschroeder)\
**Post date:** [July 12, 2024, 5:35pm UTC](https://community.plotly.com/t/issue-with-patch-update-in-dash-with-visualisation/85769/2 "2024-07-12T17:35:31Z")

</div>

Hi @ksuryateja24  
👋 Welcome to the community .

This is a very good question. I’m also puzzled as to why this is happening. Your example code is very similar to the [append example in the docs](https://dash.plotly.com/partial-properties#append), yet it’s not working correctly. I’m sure we’re missing something, but I can’t put my finger on it…

---

<div class="post-metadata">

**Author:** ![ksuryateja24](https://avatars.discourse-cdn.com/v4/letter/k/9f8e36/32.png) [@ksuryateja24](https://community.plotly.com/u/ksuryateja24)\
**Post date:** [July 12, 2024, 6:11pm UTC](https://community.plotly.com/t/issue-with-patch-update-in-dash-with-visualisation/85769/3 "2024-07-12T18:11:48Z")

</div>

Hi @adamschroeder  
Thank you for your response

I forgot to mention one more thing, in the callback there is print statement which takes the current state of the fig and in the printed dict, the x and y points in the data of the fig updated correctly but on the frontend the line updation is not proper

---

<div class="post-metadata">

**Author:** ![ksuryateja24](https://avatars.discourse-cdn.com/v4/letter/k/9f8e36/32.png) [@ksuryateja24](https://community.plotly.com/u/ksuryateja24)\
**Post date:** [July 22, 2024, 7:19am UTC](https://community.plotly.com/t/issue-with-patch-update-in-dash-with-visualisation/85769/4 "2024-07-22T07:19:53Z")

</div>

Hi @adamschroeder,

Is there any update on this issue?

---

<div class="post-metadata">

**Author:** ![adamschroeder](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/adamschroeder/32/17280_2.png) [@adamschroeder](https://community.plotly.com/u/adamschroeder)\
**Post date:** [July 22, 2024, 2:03pm UTC](https://community.plotly.com/t/issue-with-patch-update-in-dash-with-visualisation/85769/5 "2024-07-22T14:03:29Z")

</div>

hi @ksuryateja24  
I’ve asked my colleagues today. I’ll let you know what I hear back.

---

<div class="post-metadata">

**Author:** ![adamschroeder](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/adamschroeder/32/17280_2.png) [@adamschroeder](https://community.plotly.com/u/adamschroeder)\
**Post date:** [July 23, 2024, 2:33pm UTC](https://community.plotly.com/t/issue-with-patch-update-in-dash-with-visualisation/85769/6 "2024-07-23T14:33:00Z")

</div>

hi @ksuryateja24  
An update: there is likely a bug in the graph component or Plotly.js. We need to dig into this further; in the meantime, we added it as [an issue in the Dash repo](https://github.com/plotly/dash/issues/2929).

---

<div class="post-metadata">

**Author:** ![adamschroeder](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/adamschroeder/32/17280_2.png) [@adamschroeder](https://community.plotly.com/u/adamschroeder)\
**Post date:** [July 23, 2024, 6:38pm UTC](https://community.plotly.com/t/issue-with-patch-update-in-dash-with-visualisation/85769/7 "2024-07-23T18:38:57Z")

</div>

hi @ksuryateja24  
I’m not sure at what point this bug will work its way up the priority list. In the meantime, one workaround that you can try to implement is the [extendData property of the dcc.Graph](https://dash.plotly.com/dash-core-components/graph#graph-properties).