Actualmente estoy luchando con la creación de una interfaz web con un gráfico receptivo, que debe llenarse con datos en vivo mientras el usuario visita la aplicación.

Mi objetivo era que el eje x siempre escalara automáticamente para cubrir perfectamente los datos. Luego encontré el atributo de límites de Chart.js , que cuando se establece en 'datos' debería hacer exactamente lo que quiero.

Como puede ver en este ejemplo , todo funciona bien solo para los primeros conjuntos de datos: desde los valores x> 5 en adelante, la escala del eje x de alguna manera se estropea.

¿Alguien más tuvo este problema antes? ¿Asigné otros atributos incorrectamente?

Aquí está mi código JavaScript:

 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);