<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.


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.

  • Thank You! Aidan!! I ma not sure, its problem with version, while I ma using this code able to solve this issue. In lighting component controller simply copied JS and <canvas id="canvas" width=100 height=100 /> this tag in lightning component. jsfiddle.net/m73ktoux Aug 24 '18 at 10:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.