+ Start a Discussion
Artem Kalus 7Artem Kalus 7 

Highcharts loadScript "exporting.js" in LWC not working

I cannot load static resource "exporting.js" for Highcharts in LWC. Same static resource works fine in VFP. Please help.

Downloaded Highcharts js files here:
https://www.highcharts.com/blog/download/

My ZIP static resource contents:
ROOT:
highcharts.js
highcharts.js.map
highcharts.src.js
modules - foder

modules:
accessibility.js
accessibility.js.map
accessibility.src.js
export-data.js
export-data.js.map
export-data.src.js
exporting.js
exporting.js.map
exporting.src.js







LWC.html:
<template>
    <div id="container" lwc:dom="manual"></div>
</template>

LWC.js:
import { LightningElement } from 'lwc';
import { loadScript } from 'lightning/platformResourceLoader';
import highchartsResource from "@salesforce/resourceUrl/Highcharts_8_1_0";


export default class HighchartsDynamic extends LightningElement {



    renderedCallback() {
        Promise.all([
            loadScript(this, highchartsResource + "/highcharts.js")
            .then(() => console.log("SUCCESS: highcharts.js"))
            .catch(error => console.log("ERROR: highcharts.js")),

            loadScript(this, highchartsResource + "/modules/exporting.js")
            .then(() => console.log("SUCCESS: exporting.js"))
            .catch(error => console.log("ERROR: exporting.js")),

            loadScript(this, highchartsResource + "/modules/export-data.js")
            .then(() => console.log("SUCCESS: export-data.js"))
            .catch(error => console.log("ERROR: export-data.js")),

            loadScript(this, highchartsResource + "/modules/accessibility.js")
            .then(() => console.log("SUCCESS: accessibility.js"))
            .catch(error => console.log("ERROR: accessibility.js"))
        ])
        .then(() => {
            this.runHighcharts();
        })
        .catch(error => {
            window.console.log("The error is: " + error);
        });

    }


    runHighcharts() {

        const containerId = this.template.querySelector('div').id;

        console.log('containerId: ',containerId);


        Highcharts.chart(this.template.querySelector('div'), 


            // PIE CHART EXAMPLE
            {
                chart: {
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false,
                    type: 'pie'
                },
                title: {
                    text: 'Browser market shares in January, 2018'
                },
                tooltip: {
                    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                },
                accessibility: {
                    point: {
                        valueSuffix: '%'
                    }
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: true,
                            format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                        }
                    }
                },
                series: [{
                    name: 'Brands',
                    colorByPoint: true,
                    data: [{
                        name: 'Chrome',
                        y: 61.41,
                        sliced: true,
                        selected: true
                    }, {
                        name: 'Internet Explorer',
                        y: 11.84
                    }, {
                        name: 'Firefox',
                        y: 10.85
                    }, {
                        name: 'Edge',
                        y: 4.67
                    }, {
                        name: 'Safari',
                        y: 4.18
                    }, {
                        name: 'Sogou Explorer',
                        y: 1.64
                    }, {
                        name: 'Opera',
                        y: 1.6
                    }, {
                        name: 'QQ',
                        y: 1.2
                    }, {
                        name: 'Other',
                        y: 2.61
                    }]
                }]
            }

        );
      }
}

VFP:
<apex:page >
    
    <apex:includeScript value="{!URLFOR($Resource.Highcharts_8_1_0, '/highcharts.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.Highcharts_8_1_0, '/modules/exporting.js')}"/>
    
    
    
    <apex:form >
        
        
        <div id="wrapper">
            <div id="container"></div>
        </div>
        
        
        <script>
        window.onload = function () {
            init();
        }  
        
        function init () {
            var divId = document.getElementById('wrapper');
            console.log(divId);
            Highcharts.chart('container',{
                chart: {
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false
                },
                title: {
                    text: 'Invoice Statuses Report'
                },
                tooltip: {
                    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: true,
                            color: '#000000',
                            connectorColor: '#000000',
                            format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                        },showInLegend: true
                    }
                },
                series: [{
                    type: 'pie',
                    name: 'Invoice Chart',
                    data: [{
                        name: 'Chrome',
                        y: 61.41,
                        sliced: true,
                        selected: true
                    }, {
                        name: 'Internet Explorer',
                        y: 11.84
                    }, {
                        name: 'Firefox',
                        y: 10.85
                    }, {
                        name: 'Edge',
                        y: 4.67
                    }, {
                        name: 'Safari',
                        y: 4.18
                    }, {
                        name: 'Sogou Explorer',
                        y: 1.64
                    }, {
                        name: 'Opera',
                        y: 1.6
                    }, {
                        name: 'QQ',
                        y: 1.2
                    }, {
                        name: 'Other',
                        y: 2.61
                    }]
                }]
            });
        }
        </script>
    </apex:form>
</apex:page>

 
Best Answer chosen by Artem Kalus 7
Artem Kalus 7Artem Kalus 7
Script loading needs to be done in this sequesce:
renderedCallback() {

        loadScript(this, highchartsResource + "/highcharts.js")
        .then(() => {
            console.log("SUCCESS: highcharts.js");

            loadScript(this, highchartsResource + "/modules/exporting.js")
            .then(() => {
                console.log("SUCCESS: exporting.js");

                loadScript(this, highchartsResource + "/modules/export-data.js")
                .then(() => {
                    console.log("SUCCESS: export-data.js");
                    this.runHighcharts();
                    // loadScript(this, highchartsResource + "/modules/accessibility.js")
                    // .then(() => {
                    //     console.log("SUCCESS: accessibility.js");
                    //     this.runHighcharts();
                    // })
                    // .catch(error => console.log("ERROR: accessibility.js"));
                })
                .catch(error => console.log("ERROR: export-data.js"));
                
            })
            .catch(error => console.log("ERROR: exporting.js"));
        })
        .catch(error => console.log("ERROR: highcharts.js"));

    }

​​​​​​​

All Answers

Artem Kalus 7Artem Kalus 7
Console log of files failed to load in LWC
Console Log of files failed to load.
Artem Kalus 7Artem Kalus 7
Script loading needs to be done in this sequesce:
renderedCallback() {

        loadScript(this, highchartsResource + "/highcharts.js")
        .then(() => {
            console.log("SUCCESS: highcharts.js");

            loadScript(this, highchartsResource + "/modules/exporting.js")
            .then(() => {
                console.log("SUCCESS: exporting.js");

                loadScript(this, highchartsResource + "/modules/export-data.js")
                .then(() => {
                    console.log("SUCCESS: export-data.js");
                    this.runHighcharts();
                    // loadScript(this, highchartsResource + "/modules/accessibility.js")
                    // .then(() => {
                    //     console.log("SUCCESS: accessibility.js");
                    //     this.runHighcharts();
                    // })
                    // .catch(error => console.log("ERROR: accessibility.js"));
                })
                .catch(error => console.log("ERROR: export-data.js"));
                
            })
            .catch(error => console.log("ERROR: exporting.js"));
        })
        .catch(error => console.log("ERROR: highcharts.js"));

    }

​​​​​​​
This was selected as the best answer