CODEWITHSUNDEEP
chart.jschartjs-2.6.0
Amal Joy
Amal Joy

Reputation: 31

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

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

Upvotes: 3

Views: 3311

Answers (1)

Rowf Abd
Rowf Abd

Reputation: 774

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.

Upvotes: 5

Related Questions