Can't use Highcharts in LWC

Question

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")),

      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>

Answer 1

You have a name collision, so it's not surprising you'd run into problems. Change your resource constants:

import HIGHCHARTS from "@salesforce/resourceUrl/highcharts";

...

loadScript(this, HIGHCHARTS)

As an aside, you need lwc:dom="manual" to enable access to the DOM:

<div id="container" lwc:dom="manual"></div>    

Also, the id will invariably be modified, so you'll need to get the id dynamically:

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

This happens because the framework generates unique ID values for each element to avoid DOM id collisions.