I am totally new to HightChart. I have one requirement where I have to create a geo-heatmap using HightCharts in Angular. After doing some Google searches, I was able to create a chart, but I am getting an error. Check the Error. Following is my function where I am initializing the geo-heatmap chart.
initHeatMap(topology: any, Highcharts: any, div: string,): void {
let minColor: any;
let maxColor: any
let minValue = 1;
let maxValue = 10;
if (Highcharts?.getOptions()?.colors) {
minColor = Highcharts.getOptions().colors?.[0] || '#615E9B';
}
if (Highcharts?.getOptions()?.colors) {
maxColor = Highcharts.getOptions().colors?.[1] || '#00e272';
}
Highcharts.mapChart(div, {
chart: {
map: topology,
type:'geoheatmap'
},
title: {
text: 'Geo Heatmap',
align: 'left'
},
subtitle: {
text: 'HighChart Geo Heatmap',
align: 'left'
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
},
enableButtons: true,
enableMouseWheelZoom: true
},
// xAxis: {
// type: 'linear'
// },
// yAxis: {
// type: 'linear'
// },
colorAxis: {
min: 0,
stops: [
[0, '#00ff00'], // Low intensity color
[0.5, '#ffff00'], // Medium intensity color
[1, '#ff0000'] // High intensity color
]
},
series: [{
name: 'Heatmap',
keys: ['hc-key', 'value'],
joinBy: 'hc-key',
data: this.getData(),
// mapData: Highcharts.maps[this.customMap],
mapData: topology,
states: {
hover: {
color: minColor
}
},
tooltip: {
pointFormat: '{points.name}: {point.value}'
},
dataLabels: {
enabled: true,
format: '{point.name}'
},
// type: 'geoheatmap'
}]
});
}
Package Json:
"dependencies": {
"@angular/animations": "~15.2.9",
"@angular/cdk": "^14.1.2",
"@angular/common": "~15.2.9",
"@angular/compiler": "~15.2.9",
"@angular/core": "~15.2.9",
"@angular/forms": "~15.2.9",
"@angular/localize": "~15.2.9",
"@angular/platform-browser": "~15.2.9",
"@angular/platform-browser-dynamic": "~15.2.9",
"@angular/router": "~15.2.9",
"@ng-bootstrap/ng-bootstrap": "^14.2.0",
"@ngx-translate/core": "^14.0.0",
"@ngx-translate/http-loader": "^7.0.0",
"@types/googlemaps": "^3.43.3",
"alertifyjs": "^1.13.1",
"angular-datatables": "^15.0.1",
"angular-ng-autocomplete": "^2.0.12",
"angular-plotly.js": "^4.0.4",
"bootstrap": "^5.3.0",
"core-js": "^3.25.5",
"datatables-fixedcolumns": "^3.1.0",
"datatables.net": "^1.12.1",
"datatables.net-dt": "^1.12.1",
"datatables.net-select": "^1.4.0",
"datatables.net-select-dt": "^1.4.0",
"echarts": "^5.4.2",
"highcharts": "^11.1.0",
"highcharts-angular": "^3.1.2",
"highcharts-custom-events": "^3.0.10",
"@highcharts/map-collection": "^2.0.1",
"jspdf": "^2.5.1",
"jwt-decode": "^3.1.2",
"leaflet": "^1.9.4",
"moment-timezone": "^0.5.34",
"ng-http-loader": "^12.0.0",
"ng-sidebar": "^9.4.2",
"ngx-chips": "^3.0.0",
"ngx-dropzone": "^3.1.0",
"ngx-echarts": "^14.0.0",
"ngx-summernote": "^0.8.9",
"plotly.js-dist-min": "^2.14.0",
"primeicons": "^5.0.0",
"primeng": "^15.4.1",
"rxjs": "~7.5.6",
"summernote": "^0.8.20",
"uuid": "^9.0.1",
"xlsx": "^0.18.5",
"yarn": "^1.22.19",
"zone.js": "^0.11.8"
}
I'd be happy if you provide any help thanks in advance.
After conducting some research and consulting Google, I've found a solution to my question, which may also benefit others. Instead of utilizing the HighCharts library, I'm opting for Google Visualization [Heatmap Layer][1] [Heatmap Using javascript][2]
The Heatmap Layer is part of the google.maps.visualization library, and is not loaded by default. The Visualization classes are a self-contained library, separate from the main Maps JavaScript API code. To use the functionality contained within this library, you must first load it using the libraries parameter in the Maps JavaScript API bootstrap URL:
<script async
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=visualization&callback=initMap">
And that's all. I am able to create an heatmap using Geo JSON in Google Map [1]: https://developers.google.com/maps/documentation/javascript/examples/layer-heatmap [2]: https://developers.google.com/maps/documentation/javascript/using-typescript