How to draw a line graph with line animation from left to right using chartjs?

Question

I use a graph chart using the chartjs plugin. My line chart is drawn from the bottom up at boot. I would like the lines to be animated from left to right. How can i change?

Answer 1

You can expand the chart and override the initial values ​​for the animation in the override initialization, for example

Chart.types.Line.extend({
    name: "LineAlt",
    initialize: function(data){
        Chart.types.Line.prototype.initialize.apply(this, arguments);
        this.eachPoints(function(point, index){
            Chart.helpers.extend(point, {
                x: this.scale.calculateX(0),
                y: this.scale.calculateY(point.value)
            });
            point.save();
        }, this);       
    }
});

Then just use an advanced chart like

...
new Chart(ctx).LineAlt(data);

---

Fiddle - http://jsfiddle.net/kLg5ntou/