Highchart World Map In Angular

Charts are one of the most important topics for any kind of small or big application in software.

 

From an administration and management point of view, pictorial representation plays an important role to explain details in a smart way. 

So for that, I decided to explain the world map high-chart in angular.

 

Here in this article, I will try to cover the following,

1. Setup and installtion
2. DataBinding
3. Update data
4. Legend position change
5. Show/Hide the legend
6. Legend Formation
7. Tooltip
8. Color coding
9. Summary

Introduction

 

Highcharts is a pure scripting-based charting library, that is used to enhance web applications. It provides many kinds of charts, for example, line charts, donut charts, bar charts, pie charts etc...

 

Setup and installtion

 

I assume that you have already set up your project, if you didn't set it up yet, you can visit this article.

 

Let's start with highchart setup and installation.

 

First of all, we need to install the required following library.

 

Install the below packages

npm i highcharts
npm i angular-highcharts
npm i @highcharts/map-collection

As we know that we need to select the proper version to get the feature, so do not forget to select the proper version, as I mention here

"@highcharts/map-collection": "^1.1.3",
"highcharts": "^8.2.2",
"highcharts-angular": "^2.9.0",

Then after that in app.module you need to add this module ( HighchartsChartModule) and add the respective reference.

import { HighchartsChartModule } from 'highcharts-angular';

After finishing the above you have completed step1.

 

DataBinding

 

Here in this section we need to add all the required code to bind the chart and data. First we need to add the references as follows:

import { Component } from '@angular/core';
import { map } from 'rxjs/operators';
import { Breakpoints, BreakpointObserver } from '@angular/cdk/layout';

var Highcharts = require("highcharts/highmaps.js");
import { Options } from "highcharts";
var worldMap = require("@highcharts/map-collection/custom/world.geo.json");

Now inside your component the full code is like this:

export class Dashboard1Component {
    Highcharts: typeof Highcharts = Highcharts;
    chartConstructor = "mapChart";
    updateFlag = false;
    chartData = [{
        code3: "ABW",
        z: 105
    }, {
        code3: "AFG",
        z: 35530
    }];

    chartOptions: Options = {
        chart: {
            map: worldMap as any
        },
        title: {
            text: "Angualr Highchart World Map"
        },
        subtitle: {
            text: 'Sub title: <a href="http://code.highcharts.com/mapdata/custom/world.js"> xyzzzz</a>'
        },
        exporting: {
            enabled: true
        },
        credits: {
            enabled: true
        },
        mapNavigation: {
            enabled: true,
            buttonOptions: {
                alignTo: "spacingBox"
            }
        },
        legend: {
            enabled: true
        },
        colorAxis: {
            dataClasses: [{
                to: 25,
                color: '#922291'
            }, {
                from: 26,
                to: 50,
                color: '#c893c7'
            }, {
                from: 51,
                to: 75,
                color: '#00a2ad'
            }, {
                from: 76,
                to: 100,
                color: '#7fd0d6'
            }],
            type: 'linear',
        },
        series: [{

            point: {
                events: {
                    click: (e) => {
                        this.getDataByCountryKey(e.point['hc-key'])
                    }

                    // click: this.getDataByCountryKey.bind(this)
                }
            },
            type: "map",
            name: "Random Data",
            states: {
                hover: {
                    color: "#BADA55"
                }
            },
            dataLabels: {
                enabled: true,
                format: "{point.name}"
            },
            allAreas: false,
            data: [
                ["fo", 0],
                ["um", 1],
                ["us", 2],
                ["jp", 3],
                ["sc", 4],
                ["in", 5],
                ["fr", 6],
                ["fm", 7],
                ["cn", 8],
                ["pt", 9],
                ["sw", 10],
                ["sh", 11],
                ["br", 12],
                ["ki", 13],
                ["ph", 14],
                ["mx", 15],
                ["es", 16],
                ["bu", 17],
                ["mv", 18],
                ["sp", 19],
                ["gb", 20],
                ["gr", 21],
                ["as", 22],
                ["dk", 23],
                ["gl", 24],
                ["gu", 25],
                ["mp", 26],
                ["pr", 27],
                ["vi", 28],
                ["ca", 29],
                ["st", 30],
                ["cv", 31],
                ["dm", 32],
                ["nl", 33],
                ["jm", 34],
                ["ws", 35],
                ["om", 36],
                ["vc", 37],
                ["tr", 38],
                ["bd", 39],
                ["lc", 40],
                ["nr", 41],
                ["no", 42],
                ["kn", 43],
                ["bh", 44],
                ["to", 45],
                ["fi", 46],
                ["id", 47],
                ["mu", 48],
                ["se", 49],
                ["tt", 50],
                ["my", 51],
                ["pa", 52],
                ["pw", 53],
                ["tv", 54],
                ["mh", 55],
                ["cl", 56],
                ["th", 57],
                ["gd", 58],
                ["ee", 59],
                ["ag", 60],
                ["tw", 61],
                ["bb", 62],
                ["it", 63],
                ["mt", 64],
                ["vu", 65],
                ["sg", 66],
                ["cy", 67],
                ["lk", 68],
                ["km", 69],
                ["fj", 70],
                ["ru", 71],
                ["va", 72],
                ["sm", 73],
                ["kz", 74],
                ["az", 75],
                ["tj", 76],
                ["ls", 77],
                ["uz", 78],
                ["ma", 79],
                ["co", 80],
                ["tl", 81],
                ["tz", 82],
                ["ar", 83],
                ["sa", 84],
                ["pk", 85],
                ["ye", 86],
                ["ae", 87],
                ["ke", 88],
                ["pe", 89],
                ["do", 90],
                ["ht", 91],
                ["pg", 92],
                ["ao", 93],
                ["kh", 94],
                ["vn", 95],
                ["mz", 96],
                ["cr", 97],
                ["bj", 98],
                ["ng", 99],
                ["ir", 100],
                ["sv", 101],
                ["sl", 102],
                ["gw", 103],
                ["hr", 104],
                ["bz", 105],
                ["za", 106],
                ["cf", 107],
                ["sd", 108],
                ["cd", 109],
                ["kw", 110],
                ["de", 111],
                ["be", 112],
                ["ie", 113],
                ["kp", 114],
                ["kr", 115],
                ["gy", 116],
                ["hn", 117],
                ["mm", 118],
                ["ga", 119],
                ["gq", 120],
                ["ni", 121],
                ["lv", 122],
                ["ug", 123],
                ["mw", 124],
                ["am", 125],
                ["sx", 126],
                ["tm", 127],
                ["zm", 128],
                ["nc", 129],
                ["mr", 130],
                ["dz", 131],
                ["lt", 132],
                ["et", 133],
                ["er", 134],
                ["gh", 135],
                ["si", 136],
                ["gt", 137],
                ["ba", 138],
                ["jo", 139],
                ["sy", 140],
                ["mc", 141],
                ["al", 142],
                ["uy", 143],
                ["cnm", 144],
                ["mn", 145],
                ["rw", 146],
                ["so", 147],
                ["bo", 148],
                ["cm", 149],
                ["cg", 150],
                ["eh", 151],
                ["rs", 152],
                ["me", 153],
                ["tg", 154],
                ["la", 155],
                ["af", 156],
                ["ua", 157],
                ["sk", 158],
                ["jk", 159],
                ["bg", 160],
                ["qa", 161],
                ["li", 162],
                ["at", 163],
                ["sz", 164],
                ["hu", 165],
                ["ro", 166],
                ["ne", 167],
                ["lu", 168],
                ["ad", 169],
                ["ci", 170],
                ["lr", 171],
                ["bn", 172],
                ["iq", 173],
                ["ge", 174],
                ["gm", 175],
                ["ch", 176],
                ["td", 177],
                ["kv", 178],
                ["lb", 179],
                ["dj", 180],
                ["bi", 181],
                ["sr", 182],
                ["il", 183],
                ["ml", 184],
                ["sn", 185],
                ["gn", 186],
                ["zw", 187],
                ["pl", 188],
                ["mk", 189],
                ["py", 190],
                ["by", 191],
                ["cz", 192],
                ["bf", 193],
                ["na", 194],
                ["ly", 195],
                ["tn", 196],
                ["bt", 197],
                ["md", 198],
                ["ss", 199],
                ["bw", 200],
                ["bs", 201],
                ["nz", 202],
                ["cu", 203],
                ["ec", 204],
                ["au", 205],
                ["ve", 206],
                ["sb", 207],
                ["mg", 208],
                ["is", 209],
                ["eg", 210],
                ["kg", 211],
                ["np", 212]
            ]
        }]

    };

    onClick() {
        let newData1 = ["eg", 555];
        let newData2 = ["kg", 555];
        let newData3 = ["ru", 555];

        console.log(...(this.chartOptions.series[0] as any).data);
        this.chartOptions = {
            // title: {
            // text: "updated"
            // },
            series: [{
                type: "map",
                data: [
                    ...(this.chartOptions.series[0] as any).data,

                    // ["eg", 555],
                    // ["kg", 555],
                    // ["np", 555]
                    newData1,
                    newData2,
                    newData3
                ]
            }]
        };

        this.updateFlag = true;
    }

    getDataByCountryKey(ckey: any) {
        console.log('CountryKey:' + ckey);
    }
}

This is all about component code.

 

Here this is very small code for HTML

<button (click)="onClick()">Update data</button>
<highcharts-chart id="container"
   [Highcharts]="Highcharts"
   [constructorType]="chartConstructor"
   [options]="chartOptions"
   [(update)]="updateFlag"
   style="width: 100%; height: 100%;">
</highcharts-chart>

Now you have completed your code part, if you run the application you will get the result like this below.

 

Please refer to the image.

 

Update data

 

As you know that only static data can't meet the business requirement, so for that I have created one button; i.e. Update Data and I use method onClick()

<button (click)="onClick()">Update data</button>

which is implemented in .ts file for updating data dynamically.

onClick() {
    let newData1 = ["eg", 555];
    let newData2 = ["kg", 555];
    let newData3 = ["ru", 555];

    console.log(...(this.chartOptions.series[0] as any).data);
    this.chartOptions = {
        // title: {
        // text: "updated"
        // },
        series: [{
            type: "map",
            data: [
                ...(this.chartOptions.series[0] as any).data,

                // ["eg", 555],
                // ["kg", 555],
                // ["np", 555]
                newData1,
                newData2,
                newData3
            ]
        }]
    };

    this.updateFlag = true;
}

 

Legend position change

 

A legend is just a kind box for the data representation that can contain a symbol and name for each series item which is in the chart. In the above code we have only default legend code i.e.

legend: {
   enabled: true
},

so this will show legend in horizontal direction, so when we want to show in vertical direction then use the below code

legend: {
    enabled: true,
    layout: 'vertical',
    align: 'left',
    verticalAlign: 'middle',
    itemMarginTop: 10,
    itemMarginBottom: 10
},

 

Show/Hide the Legend

 

As you have seen in the above code we have used enabled: true in the legend section, if we don't want to show the legend, then just make it false.

 

Legend Formatting

 

For legend formating you need to add a labelFormatter with the function, inside this you can write your cusrtom code like below.

legend: {
   layout: 'vertical',
   labelFormatter: function () {
   return this.name + ' abccc';
}

Tooltip

 

The tooltip is the options that appears when the user hovers on a series or data point.

tooltip: {
    formatter: function() {
        console.log(this.point);
        return '<b>' + this.point.name + '</b>';
    },
    enabled: true
}

Color coding

 

Color coding is used to show the different colors based on data range as you can see in the code color axis I have defined the data range.

colorAxis: {
    dataClasses: [{
        to: 25,
        color: '#922291'
    }, {
        from: 26,
        to: 50,
        color: '#c893c7'
    }, {
        from: 51,
        to: 75,
        color: '#00a2ad'
    }, {
        from: 76,
        to: 100,
        color: '#7fd0d6'
    }],
    type: 'linear',
},

Get data on country click.

 

The method that I use in series inside point:

point: {
        events: {
            click: (e) => {
                this.getDataByCountryKey(e.point['hc-key'])
            }
            // click: this.getDataByCountryKey.bind(this)
        }
        will
        return the key of clicked country,
        and below in component i have defined this method getDataByCountryKey
        getDataByCountryKey(ckey: any) {
            console.log('CountryKey:' + ckey);
        }

So based on this key you can get the real data.

 

Summary

 

Now our application is completed. so you can run it again using the command line 'ng serve'.

 

Here you have learned how to create a world map high chart, played with legend and dynamic data binding, and finally got data based on country click.

 

I hope this project will help you to understand better how to build an Angular application and how to integrate the Highcharts library

 

Kindly let me know if you face any issue, I will try my best to resolve as much as possible.

 

I hope you liked this tutorial; please share it with others.

 

Thank you for taking your valuable time to read the full article.