Highmaps chart is empty in Angular 5

Question

I have a component where I have to show high maps. No errors but the maps is always empty

My chart options object :

let chartData = [{ code3: "ABW", z: 105 }, { code3: "AFG", z: 35530 }];
this.chartConfigObject = new MapChart(<any>{
            chart: {
                borderWidth: 1,
                map: 'custom/world'
            },

            title: {
                text: 'World population 2013 by country'
            },

            subtitle: {
                text: 'Demo of Highcharts map with bubbles'
            },

            legend: {
                enabled: false
            },

            mapNavigation: {
                enabled: true,
                buttonOptions: {
                    verticalAlign: 'bottom'
                }
            },

            series: [{
                name: 'Countries',
                color: '#E0E0E0',
                enableMouseTracking: false
            }, {
                type: 'mapbubble',
                name: 'Population 2016',
                joinBy: ['iso-a3', 'code3'],
                data: chartData,
                map: mapData,
                minSize: 4,
                maxSize: '12%',
                tooltip: {
                    pointFormat: '{point.properties.hc-a2}: {point.z} thousands'
                }
            }]
        });

When I console the created MapChart object i am getting the series as null always.

What am i missing and why the maps series is always null?

I am using angular-highcharts component as explained here : https://github.com/cebor/angular-highcharts

reproduced in stackblitz: https://stackblitz.com/edit/angular-highcharts-stock-nbvnuw?file=app%2Fapp.module.ts

Answer 1

Might, it can be useful.

Here is the solution for angular-highcharts:

1) Download the map from collection: https://code.highcharts.com/mapdata/

2) Create a variable that equals to the content of this file and export it:

instead of

Highcharts.maps["custom/world"] = { ... content of the file ... }

use

const worldMap = { ... content of the file ... }
export default worldMap;

2) Import this map to your component (for world-map.ts):

import worldMap from './world-map';

3) use

chart: {
  ...
  map: worldMap,
  ...
},

And, of course, don't forget to add a couple of lines to your module:

import { ChartModule, HIGHCHARTS_MODULES } from 'angular-highcharts';
import * as highmaps from 'highcharts/modules/map.src';

@NgModule({
  ...
  providers: [
    { provide: HIGHCHARTS_MODULES, useFactory: () => [highmaps] }
  ],
  ...
})

About modules: https://www.npmjs.com/package/angular-highcharts#highmaps

Here is the working example: https://stackblitz.com/edit/angular-highcharts-stock-byjo6a

Solution was found here: https://forum.highcharts.com/highmaps-usage-f14/highmaps-bubble-chart-is-empty-t40432/

Answer 2

You are not providing the map data to your chart , so it doesn't know which map to show. Try showing the map data like mapData: Highcharts.maps['custom/world'] under Series.

If you cannot access the maps in your Highcharts reference , try importing all the maps (JS files) from the HighMaps library into your project and reference them in your typescript component file like this:

const Highcharts = {maps: {}};
require('../../../assets/maps')(Highcharts); //your custom project path

and use mapData: Highcharts['maps']['custom/world'] or whatever is the map you wanted to use like 'countries/us/us-all'

Below is working map code using angular-highcharts to plot the map and points on it:

getMap(data) {        
        return new MapChart({
            chart: {    
                    events: {
                    load: function (point) {
                        //do something here on page load
                    }
                },            
                spacingBottom: 20
                backgroundColor: '#FFF',
                style: {fontFamily: 'inherit'}
            },
            title: {
                text: ''
            },
            mapNavigation: {
                enabled: true
            },
            tooltip: {
                headerFormat: '',
                formatter: function () {
                    var toolTipTxt = '<b>' + this.point.options.name + '</b>';                    
                    return toolTipTxt;
                }
            },
            plotOptions: {
                series: {
                    color: '#00A778',
                    marker: {
                        radius: 6,
                        symbol: 'circle',
                        lineColor: '#00A778',
                        lineWidth: 1,
                        states: {
                            select: {
                                fillColor: '#00A778',
                                lineWidth: 1,
                                lineColor: '#00A778'
                            }
                        }
                    },
                    point: {
                        events: {
                            click: function () {
                                this.select(null, true);
                            }
                        }
                    }                 
                }
            },
            series: [
                {
                    //mapData: Highcharts['maps']['custom/world']
                    mapData: Highcharts.maps['custom/world'], 
                    name: 'Basemap',
                    borderColor: '#A0A0A0',
                    nullColor: 'rgba(200, 200, 200, 0.3)',
                    showInLegend: false,
                    data: []
                },
                {
                    // Specify points using lat/lon
                    type: 'mappoint',
                    name: 'MySites',
                    data: data
                }                
            ]
        });
    }

Also you need proj4js library to plot points on the map, in case if that's your requirement as well.

Hope this helps !