HighCharts-Tilemap not working in angular 14

[AkshataCS]

Hello Team,
Am trying to use highcharts tilemap in angular and installed all the required libraries and the required code but still am not able to get the expected result, please help.
Code referring to : https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/honeycomb-usa/
Expected output:

Code:
1)app.component.ts
import { Component, OnInit } from '@angular/core';
import { AfterViewInit } from '@angular/core';
import * as Highcharts from 'highcharts';
import HighchartsMore from 'highcharts/highcharts-more';
import HighchartsSolidGauge from 'highcharts/modules/solid-gauge';
import HighchartTilemap from 'highcharts/modules/tilemap'
import HC_map from 'highcharts/modules/map';
import Highchartexport from 'highcharts/modules/exporting'
import Highchartheatmap from 'highcharts/modules/heatmap'
import Highchartexportdata from 'highcharts/modules/export-data'
import Highchartaccessibility from 'highcharts/modules/accessibility'
// HighchartsMore(Highcharts);
// // HighchartsSolidGauge(Highcharts);
HighchartTilemap(Highcharts);
HC_map(Highcharts);
// Highchartheatmap(Highcharts)
// Highchartexportdata(Highcharts)
// Highchartaccessibility(Highcharts)

@component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})

export class AppComponent implements OnInit {
title = 'High Charts Simplified';

ngOnInit(): void {

this.createtileMap();

}

//for tilemap
private createtileMap(): void {

let date = new Date();
const data: any[] = [];

for (let i = 0; i < 5; i++) {
  date.setDate(new Date().getDate() + i);
  data.push({
    name: `${date.getDate()}/${date.getMonth() + 1}`,
    y: this.getRandomNumber(0, 1000),
  });
}

const chart = Highcharts.chart('container', {
  chart: {
    type: 'tilemap',
    inverted: true,
    height: '80%'
  },
  title: {
    text: 'Tilemap Chart',
  },
  
  accessibility: {
    description: 'A tile map represents the states of the USA by population in 2016. The hexagonal tiles are positioned to geographically echo the map of the USA. A color-coded legend states the population levels as below 1 million (beige), 1 to 5 million (orange), 5 to 20 million (pink) and above 20 million (hot pink). The chart is interactive, and the individual state data points are displayed upon hovering. Three states have a population of above 20 million: California (39.3 million), Texas (27.9 million) and Florida (20.6 million). The northern US region from Massachusetts in the Northwest to Illinois in the Midwest contains the highest concentration of states with a population of 5 to 20 million people. The southern US region from South Carolina in the Southeast to New Mexico in the Southwest contains the highest concentration of states with a population of 1 to 5 million people. 6 states have a population of less than 1 million people; these include Alaska, Delaware, Wyoming, North Dakota, South Dakota and Vermont. The state with the lowest population is Wyoming in the Northwest with 584,153 people.',
    screenReaderSection: {
        beforeChartFormat:
            '<h5>{chartTitle}</h5>' +
            '<div>{chartSubtitle}</div>' +
            '<div>{chartLongdesc}</div>' +
            '<div>{viewTableButton}</div>'
    },
    point: {
        valueDescriptionFormat: '{index}. {xDescription}, {point.value}.'
    }
},
xAxis: {
  visible: false

},

yAxis: {
visible: false
},

colorAxis: {
dataClasses: [{
from: 0,
to: 1000000,
color: '#F9EDB3',
name: '< 1M'
}, {
from: 1000000,
to: 5000000,
color: '#FFC428',
name: '1M - 5M'
}, {
from: 5000000,
to: 20000000,
color: '#FF7987',
name: '5M - 20M'
}, {
from: 20000000,
color: '#FF2371',
name: '> 20M'
}]
},
tooltip: {
headerFormat: '',
pointFormat: 'The population of {point.name} is {point.value}'
},
plotOptions: {
series: {

      dataLabels: {
          enabled: true,
          format: '{point.hc-a2}',
          color: '#000000',
          style: {
              textOutline: false
          }
      }
  },

},

series: [{
name: '',
data: [{
'hc-a2': 'AL',
name: 'Alabama',
region: 'South',
x: 6,
y: 7,
value: 4849377
}, {
'hc-a2': 'AK',
name: 'Alaska',
region: 'West',
x: 0,
y: 0,
value: 737732
}, {
'hc-a2': 'AZ',
name: 'Arizona',
region: 'West',
x: 5,
y: 3,
value: 6745408
}, {
'hc-a2': 'AR',
name: 'Arkansas',
region: 'South',
x: 5,
y: 6,
value: 2994079
}, {
'hc-a2': 'CA',
name: 'California',
region: 'West',
x: 5,
y: 2,
value: 39250017
}, {
'hc-a2': 'CO',
name: 'Colorado',
region: 'West',
x: 4,
y: 3,
value: 5540545
}, {
'hc-a2': 'CT',
name: 'Connecticut',
region: 'Northeast',
x: 3,
y: 11,
value: 3596677
}, {
'hc-a2': 'DE',
name: 'Delaware',
region: 'South',
x: 4,
y: 9,
value: 935614
}, {
'hc-a2': 'DC',
name: 'District of Columbia',
region: 'South',
x: 4,
y: 10,
value: 7288000
}, {
'hc-a2': 'FL',
name: 'Florida',
region: 'South',
x: 8,
y: 8,
value: 20612439
}, {
'hc-a2': 'GA',
name: 'Georgia',
region: 'South',
x: 7,
y: 8,
value: 10310371
}, {
'hc-a2': 'HI',
name: 'Hawaii',
region: 'West',
x: 8,
y: 0,
value: 1419561
}, {
'hc-a2': 'ID',
name: 'Idaho',
region: 'West',
x: 3,
y: 2,
value: 1634464
}, {
'hc-a2': 'IL',
name: 'Illinois',
region: 'Midwest',
x: 3,
y: 6,
value: 12801539
}, {
'hc-a2': 'IN',
name: 'Indiana',
region: 'Midwest',
x: 3,
y: 7,
value: 6596855
}, {
'hc-a2': 'IA',
name: 'Iowa',
region: 'Midwest',
x: 3,
y: 5,
value: 3107126
}, {
'hc-a2': 'KS',
name: 'Kansas',
region: 'Midwest',
x: 5,
y: 5,
value: 2904021
}, {
'hc-a2': 'KY',
name: 'Kentucky',
region: 'South',
x: 4,
y: 6,
value: 4413457
}, {
'hc-a2': 'LA',
name: 'Louisiana',
region: 'South',
x: 6,
y: 5,
value: 4649676
}, {
'hc-a2': 'ME',
name: 'Maine',
region: 'Northeast',
x: 0,
y: 11,
value: 1330089
}, {
'hc-a2': 'MD',
name: 'Maryland',
region: 'South',
x: 4,
y: 8,
value: 6016447
}, {
'hc-a2': 'MA',
name: 'Massachusetts',
region: 'Northeast',
x: 2,
y: 10,
value: 6811779
}, {
'hc-a2': 'MI',
name: 'Michigan',
region: 'Midwest',
x: 2,
y: 7,
value: 9928301
}, {
'hc-a2': 'MN',
name: 'Minnesota',
region: 'Midwest',
x: 2,
y: 4,
value: 5519952
}, {
'hc-a2': 'MS',
name: 'Mississippi',
region: 'South',
x: 6,
y: 6,
value: 2984926
}, {
'hc-a2': 'MO',
name: 'Missouri',
region: 'Midwest',
x: 4,
y: 5,
value: 6093000
}, {
'hc-a2': 'MT',
name: 'Montana',
region: 'West',
x: 2,
y: 2,
value: 1023579
}, {
'hc-a2': 'NE',
name: 'Nebraska',
region: 'Midwest',
x: 4,
y: 4,
value: 1881503
}, {
'hc-a2': 'NV',
name: 'Nevada',
region: 'West',
x: 4,
y: 2,
value: 2839099
}, {
'hc-a2': 'NH',
name: 'New Hampshire',
region: 'Northeast',
x: 1,
y: 11,
value: 1326813
}, {
'hc-a2': 'NJ',
name: 'New Jersey',
region: 'Northeast',
x: 3,
y: 10,
value: 8944469
}, {
'hc-a2': 'NM',
name: 'New Mexico',
region: 'West',
x: 6,
y: 3,
value: 2085572
}, {
'hc-a2': 'NY',
name: 'New York',
region: 'Northeast',
x: 2,
y: 9,
value: 19745289
}, {
'hc-a2': 'NC',
name: 'North Carolina',
region: 'South',
x: 5,
y: 9,
value: 10146788
}, {
'hc-a2': 'ND',
name: 'North Dakota',
region: 'Midwest',
x: 2,
y: 3,
value: 739482
}, {
'hc-a2': 'OH',
name: 'Ohio',
region: 'Midwest',
x: 3,
y: 8,
value: 11614373
}, {
'hc-a2': 'OK',
name: 'Oklahoma',
region: 'South',
x: 6,
y: 4,
value: 3878051
}, {
'hc-a2': 'OR',
name: 'Oregon',
region: 'West',
x: 4,
y: 1,
value: 3970239
}, {
'hc-a2': 'PA',
name: 'Pennsylvania',
region: 'Northeast',
x: 3,
y: 9,
value: 12784227
}, {
'hc-a2': 'RI',
name: 'Rhode Island',
region: 'Northeast',
x: 2,
y: 11,
value: 1055173
}, {
'hc-a2': 'SC',
name: 'South Carolina',
region: 'South',
x: 6,
y: 8,
value: 4832482
}, {
'hc-a2': 'SD',
name: 'South Dakota',
region: 'Midwest',
x: 3,
y: 4,
value: 853175
}, {
'hc-a2': 'TN',
name: 'Tennessee',
region: 'South',
x: 5,
y: 7,
value: 6651194
}, {
'hc-a2': 'TX',
name: 'Texas',
region: 'South',
x: 7,
y: 4,
value: 27862596
}, {
'hc-a2': 'UT',
name: 'Utah',
region: 'West',
x: 5,
y: 4,
value: 2942902
}, {
'hc-a2': 'VT',
name: 'Vermont',
region: 'Northeast',
x: 1,
y: 10,
value: 626011
}, {
'hc-a2': 'VA',
name: 'Virginia',
region: 'South',
x: 5,
y: 8,
value: 8411808
}, {
'hc-a2': 'WA',
name: 'Washington',
region: 'West',
x: 2,
y: 1,
value: 7288000
}, {
'hc-a2': 'WV',
name: 'West Virginia',
region: 'South',
x: 4,
y: 7,
value: 1850326
}, {
'hc-a2': 'WI',
name: 'Wisconsin',
region: 'Midwest',
x: 2,
y: 5,
value: 5778708
}, {
'hc-a2': 'WY',
name: 'Wyoming',
region: 'West',
x: 3,
y: 3,
value: 584153
}]
}]
} as any);
}

}

2)app.component.html

Hexagonal tilemap, sometimes referred to as a honeycomb or hexbin chart, showing population data in the US. In this case the map is used to show each US state with the same size - which removes some of the bias associated with traditional maps.

[karolkolodziej]

Our GitHub channel is treated as a bug/feature tracking tool. For these kinds of questions, please get in touch with us via dedicated support channels, which you can find here: https://www.highcharts.com/blog/support/.

Our support engineers will be more than happy to help you, to tweak the chart's configuration too much your needs.
Thanks for understanding!