Highcharts5 which implements JavaScript strict mode is not working when Locker Service is activated.

The chart renders when the Locker Service is deactivated.

But when the Locker Service is activated, it doesn't even fire the afterScriptsLoaded, most probably because the Highcharts files are not Locker compatible. (But when I inspect, I can see the two files loaded in "Sources" tab in my Chrome browser).

Component code:-

<aura:component description="testComp" implements="force:appHostable,flexipage:availableForAllPageTypes">
    <ltng:require scripts="{!join(',',
                $Resource.namespace__highchartsv5 + '/script_highcharts/highcharts.src.js',
                $Resource.namespace__highchartsv5 + '/script_highcharts/highcharts-more.src.js'
              afterScriptsLoaded="{!c.scriptsLoaded}" />
    <div aura:id="chartComponent" id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>


highcharts.src.js - https://code.highcharts.com/highcharts.src.js

highcharts-more.src.js - https://code.highcharts.com/highcharts-more.src.js


    scriptsLoaded : function(component, event, helper){


    drawChart : function(component) {
        var stackedColumnChart = new Highcharts.Chart({
            chart : {
              type: 'column',
              renderTo : component.find("chartComponent").getElement()
            title: {
                text: 'Stacked column chart'
            xAxis: {
                categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
            yAxis: {
                min: 0,
                title: {
                    text: 'Total fruit consumption'
                stackLabels: {
                    enabled: true,
                    style: {
                        fontWeight: 'bold',
                        color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
            legend: {
                align: 'right',
                x: -30,
                verticalAlign: 'top',
                y: 25,
                floating: true,
                backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
                borderColor: '#CCC',
                borderWidth: 1,
                shadow: false
            tooltip: {
                headerFormat: '<b>{point.x}</b><br/>',
                pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
            plotOptions: {
                column: {
                    stacking: 'normal',
                    dataLabels: {
                        enabled: true,
                        color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
            series: [{
                name: 'John',
                data: [5, 3, 4, 7, 2]
            }, {
                name: 'Jane',
                data: [2, 2, 3, 2, 1]
            }, {
                name: 'Joe',
                data: [3, 4, 4, 2, 5]

  • 1
    It looks like Doug has answered your issue, but I wanted to point out that you shouldn't render your chart just in an afterScriptsLoaded handler, because that event is only called once. If your component is unrendered and then re-rendered, the afterScriptsLoaded event wont be called and your chart will have disappeared forever because you are not telling your renderer that it needs to display the chart. Depending on your workflow, consider rendering in an afterRender method that is gated by an afterScripts loaded success status. Doug or other Lightning gurus may have other recommendations. Oct 31 '16 at 21:53
  • Thank you @RobertSussland. Yes, I believe you're right. I just wanted to post a quick code which can be used to replicate the issue. We're rendering the chart in rerender inside the renderer.
    – SE_User
    Nov 1 '16 at 6:48

OK - so this is the same issue (long standing but only recently reported) that hit the jquery plugin Select2. Basicaly there is a regular expression that should never have been run on this code that is rewriting the file with a quick exit (return "strict mode"; in this specific case) and neutralizing the content entirely. we have removed the use of that errant regex entirely.

The good news is that I copied your example above into my own test DE org running Winter'17 .12 patch and it ran with no issues. The .12 patch is scheduled to deploy sometime Tuesday 11/1.

enter image description here Do you already have a support case open with Salesforce on this?

  • 1
    The fix for the regex gone wild issue is being tracked by W-3413366 for anyone that wants to reference this with support etc. Oct 31 '16 at 16:59
  • Thanks a lot @Doug for the heads up. And no, we don't have a case open with Salesforce on this. Ok, waiting for the .12 patch to be released. Once again thank you so much for looking into this.
    – SE_User
    Nov 1 '16 at 6:43
  • Hi @Doug, The Highcharts is now rendering. But a small issue which I'm facing is in the tooltip. When we click on the graph, instead of showing the tooltip, an error pops up saying [NoErrorObjectAvailable] TypeError: Properties can only be defined on Objects. Device: iPad Version 9.3.5. This error is not present in Android (7.0) devices nor in iOS 10 devices.
    – SE_User
    Nov 3 '16 at 6:08

I also had issues using signitture pad javascript library which uses html5 canvas . After disabling locker service it worked but with locker service enabled it doesnt work in salesforce1 however it works in desktop browser all the time. Will this be fixed in an upcoming patch?

  • Hi Kevin, Welcome to Salesforce Stackexchange. This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead you may please ask a new specific question which addresses your issue.
    – SE_User
    Nov 2 '16 at 4:34

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.