Estoy tratando de actualizar los datos en un Chart.Js, manteniendo la longitud máxima de los datos en 15, por lo que elimino el primer elemento cuando la longitud de los datos supera los 15. He leído la documentación sobre cómo agregar y eliminar datos en un gráfico .js, y no hay problema para agregar datos, pero cuando llega a 15 elementos e intenta eliminar los datos, solo agrega etiquetas:

Aquí está el fragmento de código que usé:

 this.timeInterval = setInterval(async function () { let data = await $.ajax({ method: 'get', url: any, data: { i: _this.iterationNum }, }); var date = new Date(); let temperature = Number(data.temperature.substr(0, 4)); if (_this.chart != null) { _this.chart.data.labels.push('' + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds()); _this.chart.data.datasets[0].data.push(temperature); if (_this.chart.data.labels.length > 15) { _this.chart.data.labels.shift(); _this.chart.data.datasets[0].data.shift(); } _this.chart.update(); } else { this.sensorData.data.push(temperature); _this.sensorData.labels.push('' + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds()); if (_this.sensorData.data.length > 15) { _this.sensorData.data.shift(); _this.sensorData.labels.shift(); } } _this.iterationNum++; if (_this.iterationNum > 1000) { _this.iterationNum = 0; } }, 500);

Y los Char se han configurado de la siguiente manera:

 _this.chart = new Chart(ctx, { type: 'line', data: { labels: _this.sensorData.labels, datasets: [{ data: _this.sensorData.data, }], }, options: { scales: { yAxes: [{ ticks: { beginAtZero: false } }] }, responsive: false, legend: { display: false, }, mantainAspectRatio: false, } })

La URL de ajax se eliminó intencionalmente del fragmento de código.

Todo funciona bien hasta que alcanza el elemento 15 y comienza a eliminar datos:

Antes de llegar a los 15

Después de llegar a 15

¿Alguien sabe lo que puede estar pasando?