Highchart not working in LWC getting TypeError: e.chart is not a function

Question

I am trying to use Highchart js (https://code.highcharts.com/highcharts.js) in my LWC component for Chart, but getting error: TypeError: e.chart is not a function

I am not able to figure out what exactly I am missing, am Using Highchart demo code from documentation. Any help would be appreciated..

JS file:

import { LightningElement } from 'lwc';
import HIGHCHARTS from "@salesforce/resourceUrl/highchart";
import { loadScript} from "lightning/platformResourceLoader";

export default class RKMHighChart extends LightningElement {
    renderedCallback(){
        
        loadScript(this, HIGHCHARTS)
        .then(() => {
        console.log('High Charts Loaded');
        this.runHighcharts();
        })
        .catch(error => console.log('Error occured: ', error))
        
    }

    runHighcharts() {
        const container = this.template.querySelector('.container-class');
        
        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
            }
          ]
        });
      }

}

html file:

<template>
    Chart.. <br/>
    <div id="container" class="container-class" style="width:100%; height:400px;"></div>
</template>

Answer 1

There are a few changes in the code that you can do to get this working,

1. Make sure you add a boolean so the framework stops calling the rendering lifecycle hook multiple numbers of times

   highChartInitialized = false;
   
   renderedCallback() {
     if (this.highChartInitialized) {
        return;
     }
   
    loadScript(this, HIGHCHARTS)
      .then(() => {
         console.log("High Charts Loaded");
         this.runHighcharts();
       })
      .catch((error) => console.log("Error occured: ", error));
   }
   

2. Make sure to use correct variable names for your globals,

   window.Highcharts.chart(container, {
     title: {
        text: "Logarithmic axis demo"
    },
   

3. If there is a manual DOM manipulation by the library, make sure to use lwc:dom="manual" directive in the template as below

    <div id="container" class="container-class" style="width:100%; height:400px; lwc:dom="manual"></div>
   

Below is the complete working code

import { LightningElement } from "lwc";
import HIGHCHARTS from "@salesforce/resourceUrl/highchart";
import { loadScript } from "lightning/platformResourceLoader";

export default class HighChart extends LightningElement {
   highChartInitialized = false;

  renderedCallback() {
    if (this.highChartInitialized) {
      return;
    }

   loadScript(this, HIGHCHARTS)
     .then(() => {
       console.log("High Charts Loaded");
       this.runHighcharts();
     })
    .catch((error) => console.log("Error occured: ", error));
   }

  runHighcharts() {
   const container = this.template.querySelector(".container-class");

   window.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
      }
    ]
  });
  }
}

Refer to official docs for other examples.