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

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

  • 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, 2018 at 10:33

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .