5

LockerService was enabled as a critical update in my DE org. I am trying to create a home page showing multiple charts using Lightning component and Highcharts as charting library.

The charts are rendered fine if I deactivate the LockerService. I get this error if LockerService is active and I try to render highcharts chart:

Something has gone wrong.

Error in $A.getCallback() [NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.] Failing descriptor: {markup://c:AHM_Home1}. Please try again.

I am using Highcharts version 4.2.3

Sample code

@doug I also tried running the example mentioned at this link

Error #16 loading Highcharts with Lightning Components

A chart is rendered but x-axis categories are not rendered. Also when I move cursor over the bars in chart, I get this error:

Uncaught TypeError: Cannot read property 'clientX' of undefined throws at /resource/1466446420000/Highstock/js/highstock-all.js:172:157

The screenshot shows the resulting chart as per the sample at the above link:

Bar chart using Highstock in Lightning

  • Hi @AshishNarkhede Any updates on this? I'm still not able to make Highcharts 5 work (which is strict mode compatible) when Locker Service is activated. – SE_User Oct 31 '16 at 6:00
3

I've been able to reproduce the problem using this simple application:

<aura:application >
    <ltng:require scripts="{! $Resource.Highstock + '/js/highstock-all.js'}" afterScriptsLoaded="{!c.afterScriptsLoaded}"/>
    <div aura:id="chart" class="slds-box slds-box--small"></div>
</aura:application>


({
    afterScriptsLoaded : function(component, event, helper) {
        new Highcharts.Chart({
            chart: {
                renderTo: component.find("chart").getElement(),
                type: 'bar'
            },
            title: {
                text: 'Fruit Consumption'
            },
            xAxis: {
                categories: ['Apples', 'Bananas', 'Oranges']
            },
            yAxis: {
                title: {
                    text: 'Fruit eaten'
                }
            },
            series: [{
                name: 'Jane',
                data: [1, 0, 4]
            }, {
                name: 'John',
                data: [5, 7, 3]
            }],
        });
    }
})

I've noticed that the chart appears to draw properly, except for labels. This JS error occurs on hover:

Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

I've opened a bug to track getting this fixed.

  • Thank you @JF Paradis ! I look forward to updates on the issue. – Ashish Narkhede Jun 22 '16 at 17:56
2

Could you provide the following details to enable us to reproduce this problem?

  • Highcharts version
  • A simple version of your code illustrating the problem

We are actively increasing exposing more of the DOM API in LockerService, with the aim to keep the system secure and transparent. I personally have not seen Highcharts used with LockerService yet, but we should be able to quickly investigate this case and give you an update.

  • I've edited the question with the details you asked for. Thank you! – Ashish Narkhede Jun 21 '16 at 1:01
  • JF we have automation covering Highcharts (see TrevorB for details) and the error above is not something we've seen before with or without Highcharts. That DOM level error could be a case where the LS proxy is not getting unwrapped and is being sent directly to the raw removeChild()? Also took a quick look at the sample code and nothing jumps out there - very similar to our automated sample too. – Doug Chasman Jun 21 '16 at 11:12
  • @DougChasman I've updated the question with some more information. Kindly take a look. Thank you! – Ashish Narkhede Jun 21 '16 at 17:52
  • 1
    @JF is this been resolved? I'm getting the same issue when I activate lockerservice critical update :( – Ranga Aug 15 '16 at 18:20
  • 1
    Hi @Ranga, you should not have to apply the critical update. It has been delayed one release. We are taking the time to properly testing some libs, and I will post when I have a complete picture. – JF Paradis Aug 15 '16 at 20:12
0

It looks like the LockerService enforcement is creating a problem here. Actually, LockerService creates a secure custom DOM which creates it's custom window object too. Are you using scripts in ltng:require? if not then please update your code. For more discussion about this, you can check Salesforce blog on LockerService.

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.