Race condition when adding points too fast
- Dominant language
- JavaScript
- Stars
- 67.7k
- Forks
- 11.9k
- Avg merge
- 7h 39m
- Merged PRs (30d)
- 5
Description
### Expected behavior
Adding points too quickly while also adjusting the ticks, seems to cause some race condition.
Here's the demo of the problem: https://codepen.io/qbolec/pen/oNmwGQZ in it, I am simply adding points to the chart quite quickly. Each point has x larger by 1 then the previous one, and the y values are randomly chosen from range 8.9-9.1.
I'd exepct the plot to look like a wavy/noisy line around y=9, going from left to right :)
### Current behavior
What I see instead are some loops (sic!), downward dives, etc. Artifacts are very nondeterministic and you can see different effects with each refresh. See the screenshot of one example:

### Reproducible sample
https://codepen.io/qbolec/pen/oNmwGQZ
### Optional extra steps/info to reproduce
I'm new to Chart.js so perhaps I am doing something wrong with the code.
I've linked the Chart.js lib using https://cdn.jsdelivr.net/npm/chart.js URL.
Here's the same code as in the above codepen for reference and completeness:
```
let data = {
labels: [],
datasets: [{
label: 'Dynamic Line Chart',
borderColor: 'rgba(75, 192, 192, 1)',
data: [],
fill: false
}]
};
let options = {
scales: {
y: {
beginAtZero: true
}
}
};
let ctx = document.getElementById('myChart').getContext('2d');
let myChart = new Chart(ctx, {
type: 'line',
data: data,
options: options
});
function addData(xValue, yValue) {
data.labels.push(xValue);
data.datasets[0].data.push(yValue);
myChart.update();
myChart.options.scales.y.ticks.min = Math.min(...data.datasets[0].data);
myChart.options.scales.y.ticks.max = Math.max(...data.datasets[0].data);
myChart.update();
}
setInterval(() => {
let xValue = new Date().toLocaleTimeString();
let yValue = Math.random() * 0.2+8.9;
addData(xValue, yValue);
}, 10);
```
### Possible solution
_No response_
### Context
I'm trying to plot values of f(x) from some long running simulation where x goes from 1 upwards, and computing f(x) takes a lot of time, so I do it from setInterval, to not block the browser.
### chart.js version
v4.4.0
### Browser name and version
Firefox 118.0.2 (64 bits)
### Link to your project
_No response_
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.