Chartjs-Chart js animating a line while changing x-axis labels

by

2👍

✅

Solved it! Instead of incrementing 20 seconds, it is incrementing every 5 seconds ahead of time. Definitely a better experience for the user.

Got help from Rowf Abd’s post.

 
  var myData = [];
  var prev = 100;
  for (var i=0;i<60;i++) {
    prev += 5 - Math.random()*10;
    myData.push({x: i, y: prev});
  }

  var ctx = document.getElementById('myChart').getContext('2d');

  var chart = new Chart(ctx, {
    type: 'line',
    data: {
      datasets: [{
        data: [myData[0]],
        pointRadius: 0,
        fill: false,
        borderColor: "black",
        lineTension: 0
      }]
    },
    options: {
      legend: {
        onClick: (e) => e.stopPropagation() 
      },
      title:{
        fontColor: 'Black'
      },
      layout: {
        padding: {
            right: 10
        }
      },
      scales: {
        xAxes: [{
          type: 'linear',
          ticks: {
          }
        }],
        yAxes: [{
          scaleLabel: {
            // fontFamily: 'Lato',
            fontSize: 19,
            fontColor: "Black"
          }
        }]
       }
    }
  });
  

  var next = function() {
    var data = chart.data.datasets[0].data;
    var count = data.length;
    var xabsmin = 20;
    var xabsmax = 60;
    var incVar = 5;

    data[count] = data[count - 1];
    chart.update({duration: 0});
    data[count] = myData[count];
    chart.update();

    if (count < myData.length - 1) {
      setTimeout(next, 500);
    }
    
    if (data[count].x < xabsmin) {
      
      chart.config.options.scales.xAxes[0].ticks.min = xabsmin - xabsmin;
      chart.config.options.scales.xAxes[0].ticks.max = xabsmin;
      chart.update();

    }
    
    if(data[count].x >= xabsmin && data[count].x < (xabsmax)){
      
      var currentT = parseFloat(data[count].x);
      var modDiv = (currentT % incVar);
      var tempXMax = (currentT) + (incVar - modDiv);

      chart.config.options.scales.xAxes[0].ticks.max = tempXMax;
      chart.config.options.scales.xAxes[0].ticks.min = tempXMax - xabsmin;
      chart.update();

    }
  }

  setTimeout(next, 500);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>

<canvas id="myChart"></canvas>

Leave a comment