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>