Chartjs-Is there a way to do automatic scrolling?

by

1👍

✅

Automatic scrolling without visible scroll bar would means that the user can never see data again that was scrolled out of the visible area. If this is what you want, you can simply remove outdated labels and dataset values once a certain limit is reached. This can be done using Array.shift(), which removes the first element from an array.

chart.data.labels.push(<new label>);
chart.data.datasets[0].data.push(<new value>);
if (chart.data.labels.length > maxValues) {
  chart.data.labels.shift();
  chart.data.datasets[0].data.shift();
}
chart.update();

Please have a look at the runnable code snippet below that allows up to 10 labels and values. Once this limit is reached, outdated labels and values are removed.

var chart = new Chart('canvas', {
  type: "line",
  responsive: true,
  maintainAspectRatio: false,
  data: {
    labels: [],
    datasets: [{
      label: "Data",
      data: [],
      fill: true,
      backgroundColor: "lightblue",
      borderColor: "lightblue",
      pointRadius: 0
    }]
  },
  options: {
    legend: {
      display: true,
      position: 'bottom'
    },
    scales: {
      yAxes: [{
        ticks: {
          min: 0,
          max: 20,
          stepSize: 5
        }
      }]
    }
  }
});

var maxValues = 10;
var count = 0;
setInterval(() => {
  chart.data.labels.push(++count);
  chart.data.datasets[0].data.push(Math.floor((Math.random() * 20) + 1));
  if (chart.data.labels.length > maxValues) {
    chart.data.labels.shift();
    chart.data.datasets[0].data.shift();
  }
  chart.update();
}, 1000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="canvas" height="100"></canvas>

Leave a comment