title: How to use this highchart map in reactJS
body: <p>For the past couple days, I was struggling to use this highchart map type in my react project
  <a href="https://jsfiddle.net/26tbkjov//" rel="nofollow noreferrer">https://jsfiddle.net/26tbkjov//</a></p>
  
  <p>Can some one please help me out?
  Please check what I achieved until now:
  <a href="https://codesandbox.io/s/highcharts-react-demo-0m5ux" rel="nofollow noreferrer">https://codesandbox.io/s/highcharts-react-demo-0m5ux</a></p>
  
  <p>I am using those highcharts npm packages</p>
  
  <blockquote>
    <p>"highcharts": "^7.1.2", 
    "highcharts-react-official": "^2.2.2",</p>
  </blockquote>
  
  <p>I have tried many things and ended up in a dead path.. the following is the last thing i have tried:</p>
  
  <pre><code>import React from "react";
  import mapData from '../../api/mapData';
  import Highcharts from 'highcharts';
  import HighchartsReact from 'highcharts-react-official';
  
  require('highcharts/modules/map')(Highcharts);
  
  class MyMap extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        mapValues: [],
        modalClassic: false,
      };
      this.mapData = new mapData();
      // preparing the config of map with empty data 
      this.options = {
        title: {
          text: 'Widget click by location',
            style: {
            color: '#fff'
          },
        },
        chart:{
          backgroundColor: 'transparent',
          type: 'map',
          map: null,
        },
        mapNavigation: {
          enabled: true,
            enableButtons: false
        },
        credits: {
          enabled: false
        },
        colorAxis: {
          dataClasses: [
            {
              from: 1,
              color: '#C40401',
              name: 'widget name one'
            }, {
              from: 2,
              color: '#0200D0',
              name: 'widget name two'
            }
          ]
        },
        tooltip: {
          pointFormatter: function() {
            return this.name;
          }
        },
        legend: {
          align: 'right',
            verticalAlign: 'top',
            x: -100,
            y: 70,
            floating: true,
            layout: 'vertical',
            valueDecimals: 0,
            backgroundColor: ( // theme
            Highcharts.defaultOptions &amp;&amp;
            Highcharts.defaultOptions.legend &amp;&amp;
            Highcharts.defaultOptions.legend.backgroundColor
          ) || 'rgba(255, 255, 255, 0.85)'
        },
        series: [{
          name: 'world map',
          dataLabels: {
            enabled: true,
            color: '#FFFFFF',
            format: '{point.postal-code}',
            style: {
              textTransform: 'uppercase'
            }
          },
          tooltip: {
            ySuffix: ' %'
          },
          cursor: 'pointer',
          joinBy: 'postal-code',
          data: [],
          point: {
            events: {
              click: function(r){
                console.log('click - to open popup as 2nd step');
                console.log(r);
              }
            }
          }
        }]
      };
    }
  
    /*
    * Before mounting the component,
    * update the highchart map options with the needed map data and series data
    * */
    componentWillMount = () =&gt; {
      this.mapData.getWorld().then((r)=&gt;{
        this.setState({'mapData': r.data}, ()=&gt;{
  
          this.options.series[0].data = []; //make sure data is empty before  fill
          this.options['chart']['map'] = this.state.mapData; // set the map data of the graph (using the world graph)
  
          // filling up some dummy data with values 1 and 2
          for(let i in this.state.mapData['features']){
            let mapInfo = this.state.mapData['features'][i];
              if (mapInfo['id']) {
                var postalCode = mapInfo['id'];
                var name = mapInfo['properties']['name'];
                var value = i%2 + 1;
                var type = (value === 1)? "widget name one" : "widget name two";
                var row = i;
                this.options.series[0].data.push({
                  value: value,
                  name: name,
                  'postal-code': postalCode,
                  row: row
                });
              }
            }
            // updating the map options
            this.setState({mapOptions: this.options});
        });
      });
    }
  
    render() {
      return (
        &lt;div&gt;
              {(this.state.mapData)?
                &lt;HighchartsReact
                  highcharts={Highcharts}
                  constructorType={'mapChart'}
                  options={(this.state.mapOptions)? this.state.mapOptions: this.options}
                /&gt;
                : ''}
        &lt;/div&gt;
      );
    }
  }
  
  export default MyMap;
  
  </code></pre>