Getting error while using Chart.js

Question

 <ltng:require scripts="{!$Resource.chartJS}" afterScriptsLoaded="{!c.setup}"/>
    <canvas aura:id="chart" id="myChart" width="400" height="400"/>


({
    setup : function(component, event, helper) {
    var data = {
        labels: ["January", "February", "March"],
        datasets: [{
            data: [65, 59, 80, 81, 56, 55, 40]
        }]
    };
    var el = component.find("chart").getElement();
    var ctx = el.getContext("2d");
    var myNewChart = new Chart(ctx).Line(data);
}
})

When I am using this code in lightning component facing error. Error Message. Uncaught Action failed: c:XXXXXXXX$controller$setup [(intermediate value).Line is not a function]

Please help anyone fix this bug. Simply I did copy and paste from https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/js_libs_platform.htm this.Also in static resource Chart.js file uploaded.

Answer 1

Have you checked the version of chart.js? They significantly changed the API between the 1.x and 2.x release.

This is the 1.x way of creating a line chart:

var myNewChart = new Chart(ctx).Line(data);

This is the 2.x way:

var myLineChart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: options
});

So if you created your static resource by just downloading the latest release, that'll be your problem.