Highcharts chart not rendering if LockerService is enabled

Question

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:

Answer 1

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.

Answer 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.

Answer 3

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.