5

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"
afterScriptsLoaded="{!c.setup}"/>
  <canvas aura:id="chart" id="chart" width="400" height="400">
  </canvas>
</aura:component>

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();
    console.log(el);
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 Jun 5 '16 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 – Mohith Shrivastava Jun 5 '16 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 Jun 5 '16 at 12:50
  • Can I get any help on this. salesforce.stackexchange.com/q/129883/33796 Thanks in Advance. – Tanay das barman Jul 3 '16 at 17:38
7

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 – Mohith Shrivastava Jun 5 '16 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 – Mohith Shrivastava Jul 17 '16 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 Aug 16 '16 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 Apr 10 '17 at 22:46
1

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,{
            data:chartData,
            type: 'line',
            scaleShowLabels: false,
            scaleShowGridLines : false ,
        });
1

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");

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.