3

I'm trying to use ChartJS in a Lightning Component on a private customer community (SP17 org). When I try to generate the chart, I get the following error logged in the browser console:

"Failed to create chart: can't acquire context from the given item"

I have the following code:

// Any of the following formats may be used
var ctx = document.getElementById("myChart");
//var ctx = document.getElementById("myChart").getContext("2d");
//var ctx = $("#myChart");
//var ctx = "myChart";

var myPieChart = new Chart(ctx1,{
    type: 'pie',
    data: pieData
});

According to ChartJS docs, any of the 'ctx' assignments should work. However I consistently get the "Failed to create chart" error. My guess is that LockerService is blocking ChartJS from finding the correct DOM Canvas element in which to draw the chart.

I've also tried

var chart1 = component.find(elementId).getElement();
var ctx1 = chart1.getContext("2d");

which also does not work. Can anyone tell me how to let ChartJS find the right DOM element?

Improve this question
6
  • Are you executing this code inside the afterScriptsLoaded callback of <ltng:require>? I have a working example with Chart v2.1.4 where the markup is <canvas aura:id="chart" id="chart" width="100" height="100"> and in the afterScriptsLoaded callback the context is retrieved via component.find("chart").getElement().getContext("2d"). It's also a line chart instead of pie.
    – TrevorBliss
    Jan 12, 2017 at 1:51
  • Yes, it runs in afterScriptsLoaded context.
    – Jason Benkert
    Jan 12, 2017 at 1:58
  • I downgraded to 2.2.0 and I got it to draw the legend, but not the actual chart itself. Where can I get a 2.1.4 version of ChartJS? On github, it doesnt' have the compiled chart.min.js file for that version.
    – Jason Benkert
    Jan 12, 2017 at 2:00
  • I see a Chart.min.js under the v2.1.4 tag on Github. Try this out: github.com/chartjs/Chart.js/blob/v2.1.4/dist/Chart.min.js
    – TrevorBliss
    Jan 12, 2017 at 2:03
  • Please post the markup for your component - the getContext() method is only supported on <canvas> elements - did you happen to use a <div> or <span>? There is often confusion about id= versus aura:id=.
    – Doug Chasman
    Jan 12, 2017 at 12:36

1 Answer 1

Reset to default
3

It's finding the right element, but it seems that Lightning doesn't render canvas elements exactly as HTMLCanvasElements like Chart.js expects. It still has all the functionality of a canvas, but any usage of instanceof on it will not work. Thus when Chart.js checks to see that you have given it an HTMLCanvasElement, it fails.

I'm not sure if this is a bug or if it's Lightning and/or LockerService just doing what it's supposed to.

The latest version of Chart.js I have been able to use successfully was 2.3.

Update June 7, 2017

This issue has been fixed in Chart.js 2.6. Incidentally, Salesforce fixed instanceof issues in Spring '17, so this would have been solved either way.

Improve this answer

You must log in to answer this question.

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