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

Question

using chartjs 2.1.4 (customized one), default chart showing animation bottom to top, in our application downside of canvas two buttons (left and right)

in click on left button chart animation want to right to left, in click on right button chart animation want to show left to right

please help me to find a solution thanks in advance

Answer 1

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.