Accepted answer

The issue seems to be from the way i imported the highcarts libraries. so I removed the * as and changed it to:

import Highcharts from "highcharts/highmaps";
import worldMap from "@highcharts/map-collection/custom/world.geo.json";

and for this matter i changed the tsconfig.json file to accept the changes, you can use the follwing tsconfig.json file.

  "compileOnSave": false,
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "importHelpers": true,
    "target": "es2015",
    "typeRoots": [
    "lib": [
  "angularCompilerOptions": {
    "enableIvy": true,
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true


Found solution as i set mapData key's value to json object which I copied from this link (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: [{
    mapData: this.mapDataJson,
    joinBy: 'hc-key',
    name: 'Orders For',
    states: {
      hover: {
        color: '#BADA55'
    dataLabels: {
      enabled: true,
      format: '{}'

Here this.mapDataJson will be data of geoJson file's data

Related Query

More Query from same tag