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