I'm currently struggling with building a web frontend with a responsive chart, which should be filled with live data while the user is visiting the application.

My goal was to have the x-axis always scale automatically to perfectly cover the data. Then I found the bounds attribute of Chart.js, which when set to 'data' should do exactly what I want.

As you can see in this example, the whole thing only works well for the first few datasets - from x-values > 5 onwards, the scaling of the x-axis somehow gets messed up.

Did anyone else have this problem before? Did I assign other attributes incorrectly?

Here's my JavaScript code:

var data = [];

var graph = new Chart("chart", {
    type: 'scatter',
    data: {
        datasets: [{
            data: data,
            pointRadius: 0,
            borderWidth: 2,
            pointHitRadius: 4,
            pointHoverRadius: 6,
            tension: 0,
            showLine: true,
            xAxisID: "xAxis",
            yAxisID: "yAxis",
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        animation: false,
        plugins: {
            legend: {
                display: false,
            },
        },
        interaction: {
            mode: 'nearest',
            intersect: true,
        },
        scales: {
            xAxis: {
                type: 'linear',
                position: 'bottom',
                title: {
                    display: true,
                    text: 't (s)',
                    color: "black",
                    font: {
                        size: 15
                    }
                },

            ticks: {
                color: "black",
                callback: (value, index, values) => (index == (values.length - 1)) ? "" : value,
            },
            bounds: 'data'
        },
        yAxis: {
            type: 'linear',
            position: 'left',
            ticks: {
                color: "black",
                maxTicksLimit: 7,
            }

        }
    }
}
});


var x = 0;
setInterval(function() {

var newData = {
    x: Math.round(x * 100) / 100,
    y: Math.round(x * 100) / 100
};

data.push(newData);

graph.update();

x += 0.1;

}, 100);