Facing issues with Highcarts.Chart

Question

I am using Highcharts 7.2.2 version to display charts on my application. I am using the below code. The code runs and compile successfully on my local machine. However, when I try to deploy it using CI CD process it keeps giving me the error. Below is the code I am using which is running perfectly on my local machine.

displayGraph(results: any, key: string) {
  var self = this;
  var faultCountData: number[][] = [];
  var faultDurationData: number[][] = [];
  for (var i = 0; i < results[key].length; i++) {
    var timeArr = results[key][i].duration.split(":");
    var ms =
      Number(timeArr[0]) * 160 * 2 60 * 21000 +
      Number(timeArr[1]) * 160 * 11000;
    faultCountData.push([
      results[key][i].latestOccuranceTime,
      results[key][i].faultCount,
    ]);
    faultDurationData.push([results[key][i].latestOccuranceTime, ms]);
  }
  Highcharts.chart({
    chart: {
      renderTo: "dailyFault",
    },
    credits: { enabled: false },
    title: { text: "" },
    xAxis: {
      type: "datetime",
      labels: {
        format: "{value:%e/%m/%Y}",
      },
    },
    yAxis: [
      {
        labels: {
          format: "{value}",
          style: {
            color: Highcharts.getOptions().colors[0],
          },
        },
        title: {
          text: this.translation.translate(
            "FAULT_COUNT",
            undefined,
            this.locale.getCurrentLanguage()
          ),
          style: {
            color: Highcharts.getOptions().colors[0],
          },
        },
      },
      {
        // Secondary yAxis
        title: {
          text: this.translation.translate(
            "FAULT_DURATION_HRS",
            undefined,
            this.locale.getCurrentLanguage()
          ),
          style: {
            color: "#ffb0ad",
          },
        },
        type: "datetime",
        labels: {
          style: {
            color: "#ffb0ad",
          },
          formatter: function () {
            var time = this.value;
            var hours1 = parseInt((time / 3600000).toString());
            var mins1 = parseInt(
              (parseInt((time % 3600000).toString()) / 60000).toString()
            );
            return (
              (hours1 < 10 ? "0" + hours1 : hours1) +
              ":" +
              (mins1 < 10 ? "0" + mins1 : mins1)
            );
          },
        },
        opposite: true,
      },
    ],
    tooltip: {
      enabled: true,
      pointFormatter: function () {
        var time = this.y;
        var hours1 = parseInt((time / 3600000).toString());
        var mins1 = parseInt(
          (parseInt((time % 3600000).toString()) / 60000).toString()
        );
        if (this.series.name == "Fault Count")
          return `<span style="color:${this.color}">\u25CF</span> ${this.series.name}: <b>${this.y}</b><br/>`;
        else
          return `<span style="color:${this.color}">\u25CF</span> ${
            this.series.name
          }: <b>${
            (hours1 < 10 ? "0" + hours1 : hours1) +
            ":" +
            (mins1 < 10 ? "0" + mins1 : mins1)
          }(${self.translation.translate(
            "RUNTIME.MAINTENANCE_ADVISOR.DAILY_FAULT.HRS",
            undefined,
            self.locale.getCurrentLanguage()
          )})</b><br/>`;
      },
      shared: true,
    },
    series: [
      {
        name: this.translation.translate(
          "FAULT_DURATION",
          undefined,
          this.locale.getCurrentLanguage()
        ),
        data: [faultDurationData],
        type: "column",
        yAxis: 1,
        color: "#ffb0ad",
      },
      {
        name: this.translation.translate(
          "FAULT_COUNT",
          undefined,
          this.locale.getCurrentLanguage()
        ),
        type: "spline",
        data: [faultCountData],
      },
    ],
  });
};

The above code run perfectly in my local. however while deploying I am getting the below error:

error TS2345: Argument of type '{ chart: { renderTo: string; }; credits: { enabled: false; }; 
title: { text: string; }; xAxis: { ...' is not assignable to parameter of type 'Options'.
Types of property 'series' are incompatible.
Type '({ name: any; data: number[][]; type: "column"; yAxis: number; color: string; } | { 
name: any; ty...' is not assignable to type '(SeriesAbandsOptions | SeriesAdOptions | 
SeriesAoOptions | SeriesApoOptions | SeriesAreaOptions |...'.
Type '{ name: any; data: number[][]; type: "column"; yAxis: number; color: string; } | { name: 
any; typ...' is not assignable to type 'SeriesAbandsOptions | SeriesAdOptions | 
SeriesAoOptions | SeriesApoOptions | SeriesAreaOptions | ...'.
Type '{ name: any; data: number[][]; type: "column"; yAxis: number; color: string; }' is not 
assignable to type 'SeriesAbandsOptions | SeriesAdOptions | SeriesAoOptions | SeriesApoOptions 
| SeriesAreaOptions | ...'.
Type '{ name: any; data: number[][]; type: "column"; yAxis: number; color: string; }' is not 
assignable to type 'SeriesColumnOptions'.
Types of property 'data' are incompatible.
Type 'number[][]' is not assignable to type '(number | [string | number, number] | 
SeriesColumnDataOptions)[]'.
Type 'number[]' is not assignable to type 'number | [string | number, number] | 
SeriesColumnDataOptions'.
Type 'number[]' has no properties in common with type 'SeriesColumnDataOptions'.

Does any one have any thoughts what am I doing wrong?

Answer 1

Maybe this can help.

Use:

import * as Highcharts from 'highcharts';
...

var options = {
    chart: {
       renderTo:'dailyFault'
    },
    credits: { enabled: false },
    ...
}
Highcharts.chart(options as Highcharts.Options);