chartjs / chartjs/Chart.js

Race condition when adding points too fast

Open
#11,578 1 comment 1 reaction 0 assignees View on GitHub
type: bug
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:
![obraz](https://github.com/chartjs/Chart.js/assets/133093/64716bb3-9c8d-46dc-8c8c-b311ed204dd9)

### 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.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.