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