[Chartjs]-How to make bar chart animation where all bars grow at the same speed?

by

6👍

✅

Well, no one answered, but I managed to do it.
In case anyone needs it:

Using chartist:

// Prepare data, labels on the x axis and series on the y axis
var data = {
  labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
  series: [
    [5, 2, 4, 2, 0]
  ]
};

// Create chart
var chart = new Chartist.Bar('#results', data);

// Create animation
chart.on('draw', function(d) {
  if(d.type === 'bar') {
    var total_duration = 5000 // [ms]
    var max_value = Math.max.apply(null,d.series);
    var speed = total_duration/max_value;
    d.element.animate({
      y2: {
        begin: 0,
        // The duration of the animation of each bar is set to be
        // proportional to its value, this way all bars go at the 
        // same speed.
        dur: d.series[d.index]*speed,
        from: d.y1,
        to: d.y2,
        easing: Chartist.Svg.Easing.linear
      }
    });
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.10.1/chartist.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.10.1/chartist.min.css" rel="stylesheet"/>
<div class="ct-chart ct-perfect-fourth" id="results"></div>

Leave a comment