Highmap not displaying map with angular-highcharts in Angular5

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: <a href="http://code.highcharts.com/mapdata/countries/in/in-all.js">India</a>'
  },

  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.

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.