I have implemented a Chart.js graph in a Blazor project for monitoring a flow. The x and y values are updated approximately once every second (not at exact intervals) when window.updateHistory(measureData) is called. The y-axis is fixed, but the x-axis, which shows the values for the last 30 seconds, changes size. This causes the graph, the green lines in the image, and the time ticks to jump back and forth. I expect these elements to remain stable during updates.

I have tried disabling and changing animations, using fixed update intervals, and fixed step sizes, but none of these solutions have worked. Any suggestions would be appreciated.

The update function is called with window.updateHistory(measureData) every time new data arrives. Here is the updateHistory function:

function updateHistory(value) {
    var newData = {
        x: new Date(), 
        y: value, 
    };

    addDataToChart(window.historyChart, newData);

    var now = new Date();

    window.historyChart.data.datasets[0].data = window.historyChart.data.datasets[0].data.filter(data => {
        return now - data.x < x_time * 60 * 1000;
    });

    var minTime = new Date(now.getTime() - x_time * 60 * 1000);
    var maxTime = new Date(now.getTime()); 

    window.historyChart.options.scales.xAxes[0].ticks.min = minTime;   
    window.historyChart.options.scales.xAxes[0].ticks.max = maxTime; 

    window.historyChart.update();
}

Below is image with two screenshots showing the behavior. In the top screenshot the graph, the time ticks, the green lines and also the rightmost part of the red lines are more shifted to the left. In the bottom screenshot it is instead shifted to the right.