[Solved]-World map paths data in react high charts-Highcharts

I find another ways to render the map.

series: [{
          data: Highcharts.geojson(Highcharts.maps['https://code.highcharts.com/mapdata/cou ... /us-all.js']),
          name: 'USA',
          dataLabels: {
            enabled: true,
            format: '{point.properties.postal-code}'
          }
}]

From highcharts forum example

Basically call the js source url to create the map, but I prefer use Jordan Enev's way.

After I take a look, highcharts already gave the map collection, you can install the dependency @highcharts/map-collection example

After that you can try

import React, { Component } from 'react';
import Highcharts from 'highcharts/highmaps';
import exporting from 'highcharts/modules/exporting';
...
...
exporting(Highcharts);
window.Highcharts = Highcharts;
require('@highcharts/map-collection/countries/id/id-all');
...
...
class Choroplethmap extends Component {
...
...
...
}
export default Choroplethmap;

This issue already raise on this issue

Cheers,

The maps are now available from npm. You can import them directly into your component and pass it to Highcharts through the options object.

npm i @highcharts/map-collection

import mapDataWorld from '@highcharts/map-collection/custom/world.geo.json'

series: [
  {
    mapData: mapDataWorld,
    name: "Asia",
    data: data
  }
]

According the official Highcharts documentation you have to manualy include the map script:

In short, the GeoJSON version of the map is loaded in a script tag in the page. This GeoJSON object is then registered to the Highcharts.maps object, and applied to the mapData option in the chart setup.

As you can see in the fiddle you mentioned, they included the map with the script tag:

<script src="https://code.highcharts.com/mapdata/custom/world.js"></script>

Because of the above script include, the map is available in Highcharts.maps['custom/world'].

So in the React module you have to manually add the desired maps, like in the demo you mentioned. For example, if you want to add the World map, then:

1. Get it from here: https://code.highcharts.com/mapdata/custom/world.js
2. Replace Highcharts.maps["custom/world"] = with module.exports = in the above file.
3. Load the map in your component const map = require('./maps/world');
4. Then you can reference it in the config mapData: map

I understand that you want to skip the above process, but currently there isn't any React module that includes the map.

Actually there is a hackish way you can do it ... In your html file, where the react scripts are included, there you can include world.js script tag, but first you have to make sure that Highcharts.maps object array exist. In that fashion you'll use the maps externally.

However this is a bad practice, because of your React's components will be dependend on that map script.

Good practice is to manage your vendor modules via package manager and reference the modules in the components. In that way the components are self-descriptive