You need to sign in to do that
Don't have an account?
Artem 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:
LWC.js:
VFP:
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>
All Answers