I have included https://code.highcharts.com/highcharts.js as static resource (in format text/javascript) in my org.
When I tried a sample demo code, there is always a message saying .chart is not a function. I am thinking maybe I did not load the Highcharts JavaScript correctly. But I have no idea how to modify it.
Here is how my js file in lwc looks like:
import { LightningElement } from "lwc";
import { loadScript} from "lightning/platformResourceLoader";
import jqeuryUI from "@salesforce/resourceUrl/jquery_ui_1_12_1";
import jquery from "@salesforce/resourceUrl/jquery_2_2_4";
import Highcharts from "@salesforce/resourceUrl/highcharts";
export default class CDP_trial extends LightningElement {
renderedCallback() {
Promise.all([
loadScript(this, jquery)
.then(() => console.log("jQuery loaded"))
.catch(error => console.log("Error in loading jQuery")),
loadScript(this, jqeuryUI + "/jquery-ui-1.12.1/jquery-ui.min.js")
.then(() => console.log("jqeuryUI loaded"))
.catch(error => console.log("Error in loading jqeuryUI")), // jquery script
loadScript(this, Highcharts)
.then(() => console.log("Highcharts loaded"))
.catch(error => console.log("Error in loading Highcharts"))
])
.then(() => {
this.runHighcharts();
})
.catch(error => {
window.console.log("The error is: " + error);
});
}
runHighcharts() {
Highcharts.chart("container", {
title: {
text: "Logarithmic axis demo"
},
xAxis: {
tickInterval: 1,
type: "logarithmic",
accessibility: {
rangeDescription: "Range: 1 to 10"
}
},
yAxis: {
type: "logarithmic",
minorTickInterval: 0.1,
accessibility: {
rangeDescription: "Range: 0.1 to 1000"
}
},
tooltip: {
headerFormat: "<b>{series.name}</b><br />",
pointFormat: "x = {point.x}, y = {point.y}"
},
series: [
{
data: [1, 2, 4, 8, 16, 32, 64, 128, 256, 512],
pointStart: 1
}
]
});
}
}
And html is as follow:
<template>
<div id="container"></div>
</template>
