HIGH PRIORITY: Issue loading heatmap and export libraries and displaying X-Axis and Y-Axis

[chiranjeevi-bhaskaruni]

Please help. This is kind of Urgent.

Issue 1: Issue loading Highchart libraries

Importing libraries in Module:
import { HIGHCHARTS_MODULES, ChartModule } from 'angular-highcharts';
import * as more from 'highcharts/highcharts-more.src';
import * as exporting from 'highcharts/modules/exporting.src';
import * as highmaps from 'highcharts/modules/map.src';

{
provide: HIGHCHARTS_MODULES,
useFactory: () => [
more, exporting, highmaps
]
},
@component:
import { MapChart, Chart } from "angular-highcharts";

this.mapChart = new MapChart({});

Error:
polyfills.bundle.js:6499 ERROR Error: Uncaught (in promise): TypeError: Cannot read property '0' of undefined
TypeError: Cannot read property '0' of undefined
at a.Legend. (smd.vz.care.module.chunk.js:9541)
at a.Legend.a. [as getAllItems] (global-home.module.chunk.js:4901)
at a.Legend.destroy (global-home.module.chunk.js:5101)
at a.Legend.update (global-home.module.chunk.js:5099)
at a.Legend. (smd.vz.care.module.chunk.js:9577)
at a.Legend.a. [as update] (global-home.module.chunk.js:4901)
at global-home.module.chunk.js:5200
at a.objectEach (global-home.module.chunk.js:4910)
at a.Chart.update (global-home.module.chunk.js:5200)
at Chart.set [as options] (global-home.module.chunk.js:58)
at resolvePromise (polyfills.bundle.js:7589)
at resolvePromise (polyfills.bundle.js:7546)
at polyfills.bundle.js:7650
at ZoneDelegate.webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (polyfills.bundle.js:7181)
at Object.onInvokeTask (vendor.bundle.js:22277)
at ZoneDelegate.webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (polyfills.bundle.js:7180)
at Zone.webpackJsonp../node_modules/zone.js/dist/zone.js.Zone.runTask (polyfills.bundle.js:6953)
at drainMicroTaskQueue (polyfills.bundle.js:7359)
at ZoneTask.webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (polyfills.bundle.js:7260)
at invokeTask (polyfills.bundle.js:8502)

Issue 2: Heatmap chart is not displaying X-Axis and Y-Axis

HeatMap Config:
options = {
chart: {
type: "heatmap",

    plotBorderWidth: 0,
    events: {
      load: function () {
      }
    }
  },
  title: {
    text: MONTHS[this.start.getMonth()],
    useHtml: true,
    align: 'left',
    y: 0,
    style: {
      fontWeight: 'normal',
      fontSize: '12',
      color: 'black'
    }
  },
  subtitle: {
    text: MONTHS[this.end.getMonth()],
    useHtml: true,
    align: 'right',
    y: 0,
    style: {
      fontWeight: 'normal',
      fontSize: '12',
      color: 'black'
    }
  },
  xAxis: {
    categories: this.dates,
    labels: {
      format: '{value:%e}'
    },
    tickWidth: 0,
    opposite: true,
  },
  yAxis: {
    categories: [],
    reversed: true,
    gridLineWidth: 0
  },

  colorAxis: {
    minColor: "#9e989812",
    maxColor: "#ffd37e"
  },
  stops: [
    [0, '#9e989812'],
    [1, '#ffd37e']
  ],
  legend: {
    enabled: false
  },
  plotOptions: {
    heatmap: {
      pointPadding: 1
    },
    series: {
      stickyTracking: false
    }
  },
  series: [
    {
      name: "Active and inactive alarms",
      data: this.chartData
    }
  ],
  exporting: {
    enabled: false
  }
}
this.mapChart = new MapChart(options);

Output: