# Update Data Points Using a clientside callback
**URL:** https://community.plotly.com/t/update-data-points-using-a-clientside-callback/80761
**Category:** Dash Python
**Tags:** question
**Created:** [December 7, 2023, 4:01pm UTC](https://community.plotly.com/t/update-data-points-using-a-clientside-callback/80761 "2023-12-07T16:01:46Z")
**Posts on this page:** 13
**Page:** 1
### Author:  [@ghulam\_shabbir\_khan](https://community.plotly.com/u/ghulam_shabbir_khan)
#### Post date: [December 7, 2023, 4:01pm UTC](https://community.plotly.com/t/update-data-points-using-a-clientside-callback/80761/1 "2023-12-07T16:01:46Z")
How do I append new data points i.e. x axis and y axis values coming from input fields using a clientside\_callback function. I am currently trying something like this but it is not updating the data in real time the updated data points show when I double click on the legend of the trace that is being updated ( due to the click the trace re-renders )
Code:
```auto
dash.register_page( __name__ , path='/barchart-render')
# Page Layout for Different Filters and Dropdown Selections
def layout(**query_strings):
layout = html.Div(
[
html.Div(
children=[
html.H5('Label'),
dcc.Input(
id='Label',
style={'height': "50px", "width": "150px"}
),
html.H5('Value'),
dcc.Input(
id='Value',
style={'height': "50px", "width": "150px"}
),
dbc.Button(
id='High-button',
children="Update Chart",
n_clicks=0,
className='button'
)
]
),
html.Div(
children=[
dcc.Loading(
id="loading-graph",
children=[
html.Div(
dcc.Graph(id="barchart-graph-component", figure=BarChart),
className="graph",
)
],
type="cube",
fullscreen=True,
color="#2a9d8f"
)
],
className="main-graph-component card bg-secondary mb-3"
)
],
className="main-layout-div"
)
return layout
clientside_callback(
"""
async function(n_clicks, label, value, figure) {
console.log('n_clicks', n_clicks);
if (n_clicks > 0 & label !== undefined & label !== 0 & value !== undefined & value !== 0 ) {
value = parseInt(value);
console.log(label, value);
console.log('figure', figure);
figure.data[0].x = [...figure.data[0].x, label];
figure.data[0].y = [...figure.data[0].y, value];
console.log('updated Figure', figure);
return figure, 0;
};
return figure, 0;
}
""",
Output('barchart-graph-component', 'figure'),
Output('High-button', 'n_clicks'),
Input('High-button', 'n_clicks'),
State('Label', 'value'),
State('Value', 'value'),
State('barchart-graph-component', 'figure')
)
```
---
### Author:  [@Louis](https://community.plotly.com/u/Louis)
#### Post date: [December 7, 2023, 4:20pm UTC](https://community.plotly.com/t/update-data-points-using-a-clientside-callback/80761/2 "2023-12-07T16:20:07Z")
Hey,
use `return JSON.parse(JSON.stringify((figure)), 0;` to create a new object to update.
---
### Author:  [@ghulam\_shabbir\_khan](https://community.plotly.com/u/ghulam_shabbir_khan)
#### Post date: [December 7, 2023, 4:34pm UTC](https://community.plotly.com/t/update-data-points-using-a-clientside-callback/80761/3 "2023-12-07T16:34:56Z")
Not Working
---
### Author:  [@jinnyzor](https://community.plotly.com/u/jinnyzor)
#### Post date: [December 7, 2023, 4:47pm UTC](https://community.plotly.com/t/update-data-points-using-a-clientside-callback/80761/4 "2023-12-07T16:47:09Z")
Hello @ghulam_shabbir_khan,
Are you getting all of your console errors?
I think this would work:
```auto
dash.register_page( __name__ , path='/barchart-render')
# Page Layout for Different Filters and Dropdown Selections
def layout(**query_strings):
layout = html.Div(
[
html.Div(
children=[
html.H5('Label'),
dcc.Input(
id='Label',
style={'height': "50px", "width": "150px"}
),
html.H5('Value'),
dcc.Input(
id='Value',
style={'height': "50px", "width": "150px"}
),
dbc.Button(
id='High-button',
children="Update Chart",
n_clicks=0,
className='button'
)
]
),
html.Div(
children=[
dcc.Loading(
id="loading-graph",
children=[
html.Div(
dcc.Graph(id="barchart-graph-component", figure=BarChart),
className="graph",
)
],
type="cube",
fullscreen=True,
color="#2a9d8f"
)
],
className="main-graph-component card bg-secondary mb-3"
)
],
className="main-layout-div"
)
return layout
clientside_callback(
"""
async function(n_clicks, label, value, figure) {
console.log('n_clicks', n_clicks);
if (n_clicks && label && value) {
value = parseInt(value);
console.log(label, value);
console.log('figure', figure);
figure.data[0].x = [...figure.data[0].x, label];
figure.data[0].y = [...figure.data[0].y, value];
console.log('updated Figure', figure);
return [JSON.parse(JSON.stringify((figure)), 0];
};
return [window.dash_clientside.no_update, 0];
}
""",
Output('barchart-graph-component', 'figure'),
Output('High-button', 'n_clicks'),
Input('High-button', 'n_clicks'),
State('Label', 'value'),
State('Value', 'value'),
State('barchart-graph-component', 'figure')
)
```
---
### Author:  [@ghulam\_shabbir\_khan](https://community.plotly.com/u/ghulam_shabbir_khan)
#### Post date: [December 7, 2023, 6:04pm UTC](https://community.plotly.com/t/update-data-points-using-a-clientside-callback/80761/5 "2023-12-07T18:04:14Z")
I am getting an error in my console on trying your code:
TypeError: Cannot read properties of undefined (reading ‘apply’)
---
### Author:  [@jinnyzor](https://community.plotly.com/u/jinnyzor)
#### Post date: [December 7, 2023, 6:13pm UTC](https://community.plotly.com/t/update-data-points-using-a-clientside-callback/80761/6 "2023-12-07T18:13:38Z")
Without seeing more of your code, I dont think we can help much more.
Could you please create an MRE for use?
> [@How to write a Minimal Reproducible Example (MRE)](https://community.plotly.com/t/how-to-write-a-minimal-reproducible-example-mre/61502):
>
> Adding a minimal reproducible example to your questions will help attract community members to answer your question. The goal of writing a MRE is to allow other members of the community to run the code on their computers and “reproduce” the error, so that they can best help you. Please make sure that your MRE includes data and that the code is correctly pre-formatted. To preformat, copy and paste the code in your post and then click on \ (Preformatted text), as shown on the image:
---
### Author:  [@ghulam\_shabbir\_khan](https://community.plotly.com/u/ghulam_shabbir_khan)
#### Post date: [December 7, 2023, 7:59pm UTC](https://community.plotly.com/t/update-data-points-using-a-clientside-callback/80761/7 "2023-12-07T19:59:13Z")
This is my current code keep in mind that the BarChart variable that I am loading from another file contains a plotly bar chart in dict format. Now the problem is that the clientside callback is returning the figure correctly but the figure is not being updated in real time. When I double click on my legend the updated figure shows up ( new bar is added). I am attaching my code and the state of the graph before and after double clicking the legend ( I am clicking the legend after the clientside callback is invoked )
Code:
```auto
from .barChartConfig import BarChart
# app = Dash( __name__ )
dash.register_page( __name__ , path='/barchart-render')
# Page Layout for Different Filters and Dropdown Selections
def layout(**query_strings):
layout = html.Div(
[
html.Div(
children=[
dcc.Input(value=BarChart, id="input",
type="text",
placeholder="",
style={'marginRight': '10px', 'display': 'none'}),
html.H5('Label'),
dcc.Input(
id='xaxis',
style={'height': "50px", "width": "150px"}
),
html.H5('Value'),
dcc.Input(
id='yaxis',
style={'height': "50px", "width": "150px"}
),
dbc.Button(
id='High-button',
children="Update Chart",
n_clicks=0,
className='button'
)
]
),
html.Div(
children=[
dcc.Loading(
id="loading-graph",
children=[
html.Div(
dcc.Graph(id="barchart-graph-component", figure=BarChart),
className="graph",
)
],
type="cube",
fullscreen=True,
color="#2a9d8f"
)
],
className="main-graph-component card bg-secondary mb-3"
)
],
className="main-layout-div"
)
return layout
clientside_callback(
"""
function(n_clicks, xaxis_value, yaxis_value, figure) {
console.log('n_clicks', JSON.parse(JSON.stringify(figure)));
if ( n_clicks > 0 ) {
console.log(xaxis_value, parseInt(yaxis_value));
figure.data[0].x.push(xaxis_value);
figure.data[0].y.push(yaxis_value);
console.log('new figure', JSON.parse(JSON.stringify(figure)));
return JSON.parse(JSON.stringify(figure)), 0;
}
return [window.dash_clientside.no_update, 0];
}
""",
Output('barchart-graph-component', 'figure'),
Output('High-button', 'n_clicks'),
Input('High-button', 'n_clicks'),
State('xaxis', 'value'),
State('yaxis', 'value'),
State('barchart-graph-component', 'figure'),
prevent_intial_call=True
)
```
Before the double click on legend:
After The double click on legend the figure updates automatically:
---
### Author:  [@jinnyzor](https://community.plotly.com/u/jinnyzor)
#### Post date: [December 7, 2023, 8:25pm UTC](https://community.plotly.com/t/update-data-points-using-a-clientside-callback/80761/8 "2023-12-07T20:25:40Z")
Try this instead:
```auto
from .barChartConfig import BarChart
# app = Dash( __name__ )
dash.register_page( __name__ , path='/barchart-render')
# Page Layout for Different Filters and Dropdown Selections
def layout(**query_strings):
layout = html.Div(
[
html.Div(
children=[
dcc.Input(value=BarChart, id="input",
type="text",
placeholder="",
style={'marginRight': '10px', 'display': 'none'}),
html.H5('Label'),
dcc.Input(
id='xaxis',
style={'height': "50px", "width": "150px"}
),
html.H5('Value'),
dcc.Input(
id='yaxis',
style={'height': "50px", "width": "150px"}
),
dbc.Button(
id='High-button',
children="Update Chart",
n_clicks=0,
className='button'
)
]
),
html.Div(
children=[
dcc.Loading(
id="loading-graph",
children=[
html.Div(
dcc.Graph(id="barchart-graph-component", figure=BarChart),
className="graph",
)
],
type="cube",
fullscreen=True,
color="#2a9d8f"
)
],
className="main-graph-component card bg-secondary mb-3"
)
],
className="main-layout-div"
)
return layout
clientside_callback(
"""
function(n_clicks, xaxis_value, yaxis_value, figure) {
console.log('n_clicks', JSON.parse(JSON.stringify(figure)));
if ( n_clicks > 0 ) {
newFigure = JSON.parse(JSON.stringify(figure))
console.log(xaxis_value, parseInt(yaxis_value));
newFigure.data[0].x.push(xaxis_value);
newFigure.data[0].y.push(yaxis_value);
return newFigure, 0;
}
return [window.dash_clientside.no_update, 0];
}
""",
Output('barchart-graph-component', 'figure'),
Output('High-button', 'n_clicks'),
Input('High-button', 'n_clicks'),
State('xaxis', 'value'),
State('yaxis', 'value'),
State('barchart-graph-component', 'figure'),
prevent_intial_call=True
)
```
* * *
I think manipulating the figure object is done in place, thus it is essentially being updated without triggering to rerender. Thus, making the difference before we start modifying, this should update now.
---
### Author:  [@ghulam\_shabbir\_khan](https://community.plotly.com/u/ghulam_shabbir_khan)
#### Post date: [December 7, 2023, 8:40pm UTC](https://community.plotly.com/t/update-data-points-using-a-clientside-callback/80761/9 "2023-12-07T20:40:04Z")
Still not working, and after trying your code the re render on double clicking the legend stopped working, dk why. I am thinking maybe it is because of introducing a new figure variable, but it should work still.
---
### Author:  [@jinnyzor](https://community.plotly.com/u/jinnyzor)
#### Post date: [December 7, 2023, 8:44pm UTC](https://community.plotly.com/t/update-data-points-using-a-clientside-callback/80761/10 "2023-12-07T20:44:53Z")
```auto
from .barChartConfig import BarChart
# app = Dash( __name__ )
dash.register_page( __name__ , path='/barchart-render')
# Page Layout for Different Filters and Dropdown Selections
def layout(**query_strings):
layout = html.Div(
[
html.Div(
children=[
dcc.Input(value=BarChart, id="input",
type="text",
placeholder="",
style={'marginRight': '10px', 'display': 'none'}),
html.H5('Label'),
dcc.Input(
id='xaxis',
style={'height': "50px", "width": "150px"}
),
html.H5('Value'),
dcc.Input(
id='yaxis',
style={'height': "50px", "width": "150px"}
),
dbc.Button(
id='High-button',
children="Update Chart",
n_clicks=0,
className='button'
)
]
),
html.Div(
children=[
dcc.Loading(
id="loading-graph",
children=[
html.Div(
dcc.Graph(id="barchart-graph-component", figure=BarChart),
className="graph",
)
],
type="cube",
fullscreen=True,
color="#2a9d8f"
)
],
className="main-graph-component card bg-secondary mb-3"
)
],
className="main-layout-div"
)
return layout
clientside_callback(
"""
function(n_clicks, xaxis_value, yaxis_value, figure) {
console.log('n_clicks', JSON.parse(JSON.stringify(figure)));
if ( n_clicks > 0 ) {
newFigure = JSON.parse(JSON.stringify(figure))
console.log(xaxis_value, parseInt(yaxis_value));
newFigure.data[0].x.push(xaxis_value);
newFigure.data[0].y.push(yaxis_value);
return [newFigure, 0];
}
return [window.dash_clientside.no_update, 0];
}
""",
Output('barchart-graph-component', 'figure'),
Output('High-button', 'n_clicks'),
Input('High-button', 'n_clicks'),
State('xaxis', 'value'),
State('yaxis', 'value'),
State('barchart-graph-component', 'figure'),
prevent_intial_call=True
)
```
What about this?
---
### Author:  [@ghulam\_shabbir\_khan](https://community.plotly.com/u/ghulam_shabbir_khan)
#### Post date: [December 7, 2023, 8:48pm UTC](https://community.plotly.com/t/update-data-points-using-a-clientside-callback/80761/11 "2023-12-07T20:48:55Z")
This worked!!! 😅 I am so thankful for you help. 🥰
---
### Author:  [@jinnyzor](https://community.plotly.com/u/jinnyzor)
#### Post date: [December 7, 2023, 8:53pm UTC](https://community.plotly.com/t/update-data-points-using-a-clientside-callback/80761/12 "2023-12-07T20:53:18Z")
You’re welcome!
JS is not as forgiving with how the outputs are, if you have multiple, they need to be wrapped as a list. 🙂
---
### Author:  [@ghulam\_shabbir\_khan](https://community.plotly.com/u/ghulam_shabbir_khan)
#### Post date: [December 7, 2023, 8:54pm UTC](https://community.plotly.com/t/update-data-points-using-a-clientside-callback/80761/13 "2023-12-07T20:54:56Z")
I didn’t know that until now 😆. Thanks for the knowledge!