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?

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 '17 at 1:51
  • Yes, it runs in afterScriptsLoaded context. – Jason Benkert Jan 12 '17 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 '17 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 '17 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 '17 at 12:36
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.

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.