title: HighChart World Map not rendering in Angular 7
body: <p>I wish to implement HighChart World Map eg: 
  <a href="https://www.highcharts.com/maps/demo/data-class-ranges" rel="nofollow noreferrer">https://www.highcharts.com/maps/demo/data-class-ranges</a></p>
  
  <p>app.component.ts </p>
  
  <p>Imports</p>
  
  <pre class="lang-js prettyprint-override"><code>import { Component, OnInit } from '@angular/core';
  import * as Highcharts from 'highcharts';
  import DataModule from 'highcharts/modules/data';
  import MapModule from 'highcharts/modules/map';
  import ExportingModule from 'highcharts/modules/exporting';
  
  DataModule(Highcharts);
  MapModule(Highcharts);
  ExportingModule(Highcharts);
  </code></pre>
  
  <p>Contructor</p>
  
  <pre class="lang-js prettyprint-override"><code>constructor() {
  
      Highcharts.data({
        googleSpreadsheetKey: '1WBx3mRqiomXk_ks1a5sEAtJGvYukguhAkcCuRDrY1L0',
  
        // Custom handler when the spreadsheet is parsed
        parsed: (columns) =&gt; {
  
          // Read the columns into the data array
          var data = [];
          Highcharts.each(columns[0], function (code, i) {
            data.push({
              code: code.toUpperCase(),
              value: parseFloat(columns[2][i]),
              name: columns[1][i]
            });
          });
          Highcharts.mapChart(this.createMapOptions(data));
          return true
        },
      });
  }
  </code></pre>
  
  <p>createMapOptions Method: </p>
  
  <pre class="lang-js prettyprint-override"><code>  createMapOptions(mapData): Highcharts.Options {
      return {
        chart: {
          map: 'custom/world',
          borderWidth: 1,
          renderTo: 'container-map', // added div id 
        },
        colors: ['rgba(19,64,117,0.05)', 'rgba(19,64,117,0.2)', 'rgba(19,64,117,0.4)',
          'rgba(19,64,117,0.5)', 'rgba(19,64,117,0.6)', 'rgba(19,64,117,0.8)', 'rgba(19,64,117,1)'],
  
        title: {
          text: 'Population density by country (/km²)'
        },
  
        mapNavigation: {
          enabled: true
        },
  
        colorAxis: {
          dataClasses: [{
            to: 3
          }, {
            from: 3,
            to: 10
          }, {
            from: 10,
            to: 30
          }, {
            from: 30,
            to: 100
          }, {
            from: 100,
            to: 300
          }, {
            from: 300,
            to: 1000
          }, {
            from: 1000
          }]
        },
  
        legend: {
          title: {
            text: 'Individuals per km²',
            style: {
              color: ( // theme
                Highcharts.defaultOptions &amp;&amp;
                Highcharts.defaultOptions.legend &amp;&amp;
                Highcharts.defaultOptions.legend.title &amp;&amp;
                Highcharts.defaultOptions.legend.title.style &amp;&amp;
                Highcharts.defaultOptions.legend.title.style.color
              ) || 'black'
            }
          },
          align: 'left',
          verticalAlign: 'bottom',
          floating: true,
          layout: 'vertical',
          backgroundColor: ( // theme
            Highcharts.defaultOptions &amp;&amp;
            Highcharts.defaultOptions.legend &amp;&amp;
            Highcharts.defaultOptions.legend.backgroundColor
          ) || 'rgba(255, 255, 255, 0.85)',
          symbolRadius: 0,
          symbolHeight: 14
        },
  
        series: [{
          data: mapData,[![enter image description here][1]][1]
          joinBy: ['iso-a3', 'code'],
          animation: true,
          name: 'Population density',
          states: {
            hover: {
              color: '#a4edba'
            }
          },
          tooltip: {
            valueSuffix: '/km²'
          },
          shadow: false,
          type: "area",
        }]
  
      }
    }
  </code></pre>
  
  <p>app.component.html is simple HTML with a div tag with id container-map. I have added this id createMapOptions</p>
  
  <pre class="lang-js prettyprint-override"><code>&lt;div id="container-map"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>See the attached image to see the <a href="https://i.stack.imgur.com/GGO9c.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GGO9c.png" alt="enter image description here"></a>problem I am facing.</p>
  
  <p>Looking forward to your suggestions.</p>
  
  <p>Thanks in advance.</p>