Highmap not displaying map with angular-highcharts in Angular5 - angular5

Question

I am using this angular-highcharts module [https://github.com/cebor/angular-highcharts/] in my project
and added code to display map(India) with following code
In app.module.ts
import { ChartModule, HIGHCHARTS_MODULES } from 'angular-highcharts';
import * as drilldown from 'highcharts/modules/drilldown.src.js';
import * as highmaps from 'highcharts/modules/map.src';
import * as exporting from 'highcharts/modules/exporting.src';
import { BarChartComponent } from './components/bar-chart/bar-
chart.component';
import { MultiChartComponent } from './components/multi-chart/multi-
chart.component';
import { MapChartComponent } from './components/map-chart/map-
chart.component';
export function highchartModules() {
return [drilldown, highmaps, exporting];
}
#NgModule({
imports: [
CommonModule,
DashboardRoutesModule,
NgbModule,
SharedModule,
ChartModule
],
declarations: [DashboardComponent, BarChartComponent,
MultiChartComponent, MapChartComponent],
providers: [{
provide: HIGHCHARTS_MODULES, useFactory: highchartModules
}]
})
export class DashboardModule { }
In my component map-chart.component.ts
import { Component, OnInit, AfterViewInit } from '#angular/core';
import * as Highcharts from 'highcharts/highmaps';
#Component({
selector: 'app-map-chart',
templateUrl: './map-chart.component.html',
styleUrls: ['./map-chart.component.scss']
})
export class MapChartComponent implements OnInit {
mapChart: MapChart;
constructor() {
this.mapChart = new MapChart({
series: [{
data: [{
'hc-key': 'in-py',
'value': 0
}, {
'hc-key': 'in-ld',
'value': 1
}, {
'hc-key': 'in-wb',
'value': 2
}, {
'hc-key': 'in-or',
'value': 3
}, {
'hc-key': 'in-br',
'value': 4
}, {
'hc-key': 'in-sk',
'value': 5
}, {
'hc-key': 'in-ct',
'value': 6
}, {
'hc-key': 'in-tn',
'value': 7
}, {
'hc-key': 'in-mp',
'value': 8
}, {
'hc-key': 'in-2984',
'value': 9
}, {
'hc-key': 'in-ga',
'value': 10
}, {
'hc-key': 'in-nl',
'value': 11
}, {
'hc-key': 'in-mn',
'value': 12
}, {
'hc-key': 'in-ar',
'value': 13
}, {
'hc-key': 'in-mz',
'value': 14
}, {
'hc-key': 'in-tr',
'value': 15
}, {
'hc-key': 'in-3464',
'value': 16
}, {
'hc-key': 'in-dl',
'value': 17
}, {
'hc-key': 'in-hr',
'value': 18
}, {
'hc-key': 'in-ch',
'value': 19
}, {
'hc-key': 'in-hp',
'value': 20
}, {
'hc-key': 'in-jk',
'value': 21
}, {
'hc-key': 'in-kl',
'value': 22
}, {
'hc-key': 'in-ka',
'value': 23
}, {
'hc-key': 'in-dn',
'value': 24
}, {
'hc-key': 'in-mh',
'value': 25
}, {
'hc-key': 'in-as',
'value': 26
}, {
'hc-key': 'in-ap',
'value': 27
}, {
'hc-key': 'in-ml',
'value': 28
}, {
'hc-key': 'in-pb',
'value': 29
}, {
'hc-key': 'in-rj',
'value': 30
}, {
'hc-key': 'in-up',
'value': 31
}, {
'hc-key': 'in-ut',
'value': 32
}, {
'value': 33
}],
joinBy: 'hc-key',
name: 'Random data',
states: {
hover: {
color: '#BADA55'
}
},
dataLabels: {
enabled: true,
format: '{point.name}'
}
},
{
type: 'mappoint',
data: [{
name: 'Chennai',
x: 3354,
y: -828
}]
}],
chart: {
map: 'countries/in/in-all'
},
title: {
text: 'Highmaps basic demo'
},
subtitle: {
text: 'Source map: India'
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
colorAxis: {
min: 0
}
});
}
ngOnInit() {
}
}
and in map-chart.component.html
<div [chart]="mapChart"></div>
But my chart is not displaying on page and there is no any errors even.
and if I console.log(this.mapChart) then inside it i get the series null.
What actually causing problem here.

Answer 1

I finally found solution as i set mapData key's value to json object
which I copied from this link https://code.highcharts.com/mapdata/
(here copy the geoJson file's data which is map data of respective
state/country you want).Now chart object will look like below code,
{
series: [{
data: this.mapChartItem.data,
mapData: this.mapDataJson,
joinBy: 'hc-key',
name: 'Orders For',
states: {
hover: {
color: '#BADA55'
}
},
dataLabels: {
enabled: true,
format: '{point.name}'
}
}
}
Here this.mapDataJson will be data of geoJson file's data.