I am trying to use Chart.js library to build a demo component .Everything worked before locker came into existence and after locker service I get the below error

"Something has gone wrong. Action failed: c$OpportunitySplit$controller$setup [TypeError: Cannot read property 'getComputedStyle' of undefined] Failing descriptor: {c$OpportunitySplit$controller$setup}. Please try again."

The component code is below

<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId,force:hasSObjectName" access="global" >
 <ltng:require styles="/resource/SLDS104/assets/styles/salesforce-lightning-design-system-ltng.css" scripts="/resource/Chartjs"
  <canvas aura:id="chart" id="chart" width="400" height="400">

The controller js code below

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 , {
      type: "line",
      data: data,

Anybody else seeing this issue with chart.js library in the Locker Service Enabled org ?

  • After watching Friday's Summer 16 Release preview webinar, I can't help but wonder if c$OpportunitySplit$controller$setup isn't an underlying Aura method as opposed to one specific to your namespace/controller. I suspect you're accessing system code you're not supposed to be and that's what the locker service is telling you. How to change the behavior using your code isn't clear or obvious to me although you use c.setup in your code as opposed to c.$setup
    – crmprogdev
    Commented Jun 5, 2016 at 6:12
  • 1
    I have changed signatures and tested.It does not work.I suspect the error is in chartjs .Also $ is added in error messages here by SFDC :).It has nothing to do here Commented Jun 5, 2016 at 9:38
  • 1
    Seriously, what @DougChaseman said is the essence of what I was alluding to based on what I'd seen in the preview broadcast (nice explanation of the issues if you missed it). It was broke and they had to fix it for you. Nice catch my friend.
    – crmprogdev
    Commented Jun 5, 2016 at 12:50
  • Can I get any help on this. salesforce.stackexchange.com/q/129883/33796 Thanks in Advance. Commented Jul 3, 2016 at 17:38

3 Answers 3


Please open a case on this to get things tracked and post the case ID here so I can follow up on it. We have not tested Chart.js yet and this is most likely an issue in Locker's secure virtual DOM implementation. Can you also provide here the specific version of Chart.js (2.1.4 is the latest I believe) you are using in /resource/Chartjs so I can get look into this now? Are you using Chart.js or Chart.bundle.js?

FYI these incomplete secure virtual DOM issues tend to be quick to debug if you enable Break on All Exceptions in your browser of choice's js debugger settings. Chrome dropped me on the exact line right away. Of course since the bug was mine you can also let me deal with it - but every bit of info we can get upfront helps reduce the cycle time from reported issue to fix.

UPDATE: easily repro'ed the issue with ChartJS 2.1.4 and the problem is simply that SecureDcoument.defaultView is not implemented.

enter image description here

With that trivial fix in place (not on production yet!) things are working nicely:

enter image description here

  • Thanks for the response and fix .Could you please let me know when the fix will make it PROD so I can inform client on when to expect this done .Also on the line it broke ,it's my bad not to put detail there and I knew that was line that broke it. My apologies and again much appreciated. Thank you Commented Jun 5, 2016 at 14:03
  • There are still issues with ChartJs .When you embed the chartJs component inside record home page it displays below log imagebin.ca/v/2oPiIMBi4QOh Commented Jul 17, 2016 at 22:12
  • 1
    @DougChasman is this issue fixed yet? I have installed the latest chartjs app from SF App exchange and still throws an error when I enable locker service :(
    – Ranga
    Commented Aug 16, 2016 at 8:10
  • This still seems to be a common issue for many. If this is fixed? (Do we mean fixed on salesforce side?) then is there a standard approach documented that shows a working example? Many Thanks
    – dacology
    Commented Apr 10, 2017 at 22:46

I was able to make chartJs working with locker service. I found that .getContext("2d") doesn't work in locker service but in chart js Version: 2.5.0 canvas can be accessed using document.getElementById("myChart")

var ctx = document.getElementById("myChart");
        var myLine = new Chart(ctx,{
            type: 'line',
            scaleShowLabels: false,
            scaleShowGridLines : false ,

I have also struggled with this for a long time! I eventually got this to work with the following to steps.

  1. I switched to v2.3 of ChartJS (maybe 2.4 would have worked also). Either there is a bug in 2.5 or it is not compatible with the way I am using it.
  2. I replaced the code to get the Canvas element as below, previously using getElementById. ( element.getContext("2d") does work with LockerService & v2.3)

    var el = component.find("radarChart").getElement(); var ctx = el.getContext("2d");

You must log in to answer this question.

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