[Chartjs]-Chartjs initial animation want to change from left to right (default it is bottom to top)

4๐Ÿ‘

var myData = [{x:0,y:0},{x:1,y:2},{x:2,y:1},{x:3,y:3}];
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    datasets: [{
      data: [myData[0]],
      lineTension: 0
    }]
  },
  labels:['a','a','a','a','a','a',],
  options: {
    scales: {
      xAxes: [{
        type: 'linear',
        ticks: {
          min: 0,
          max: 3
        }
      }],
      yAxes: [{
        ticks: {
          min: 0,
          max: 3
        }
      }]
     }
  }
});
var next = function() {
  var data = myChart.data.datasets[0].data;
  var count = data.length;
  data[count] = data[count - 1];
  myChart.update({duration: 0});
  data[count] = myData[count];
  myChart.update();
  if (count < myData.length) {
    setTimeout(next, 1000);
  }
}
setTimeout(next, 1000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>

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

No easy option, You have to use something like this.

Leave a comment