score:0

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": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "angularcompileroptions": {
    "enableivy": true,
    "fulltemplatetypecheck": true,
    "strictinjectionparameters": true
  }
}

score:1

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


Related Query

More Query from same tag