Documentation v8.0.28

Preview Purchase

Overview

AmChartsis programming library for all your data visualization needs. You can download and use it for free. The only limitation of the free version is that a small link to this web site will be displayed in the top left corner of your charts. If you would like to use charts without this link, or you appreciate the software and would like to support its creators, please purchase a commercial license. For more info please check AmCharts Home.

Exclusively for Keenthemes users

After purchasing Metronic you will get a promo code for 15% discountoff the commercial license of AmChart. To find the promo code please check the README file in the purchased package.

Usage

To use AmChartsin your page you will need to include

<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/maps.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>

Basic Map

Simply define a blank divwith a unique idin your HTML markup. Then initialize the chart via javascript.

JAVASCRIPT
HTML

am4core.ready(function () {

    // Themes begin
    am4core.useTheme(am4themes_animated);
    // Themes end

    // Create map instance
    var chart = am4core.create('kt_amcharts_1', am4maps.MapChart);

    // Set map definition
    chart.geodata = am4geodata_worldLow;

    // Set projection
    chart.projection = new am4maps.projections.Miller();

    // Create map polygon series
    var polygonSeries = chart.series.push(new am4maps.MapPolygonSeries());

    // Exclude Antartica
    polygonSeries.exclude = ['AQ'];

    // Make map load polygon (like country names) data from GeoJSON
    polygonSeries.useGeodata = true;

    // Configure series
    var polygonTemplate = polygonSeries.mapPolygons.template;
    polygonTemplate.tooltipText = '{name}';
    polygonTemplate.polygon.fillOpacity = 0.6;


    // Create hover state and set alternative fill color
    var hs = polygonTemplate.states.create('hover');
    hs.properties.fill = chart.colors.getIndex(0);

    // Add image series
    var imageSeries = chart.series.push(new am4maps.MapImageSeries());
    imageSeries.mapImages.template.propertyFields.longitude = 'longitude';
    imageSeries.mapImages.template.propertyFields.latitude = 'latitude';
    imageSeries.mapImages.template.tooltipText = '{title}';
    imageSeries.mapImages.template.propertyFields.url = 'url';

    var circle = imageSeries.mapImages.template.createChild(am4core.Circle);
    circle.radius = 3;
    circle.propertyFields.fill = 'color';
    circle.nonScaling = true;

    var circle2 = imageSeries.mapImages.template.createChild(am4core.Circle);
    circle2.radius = 3;
    circle2.propertyFields.fill = 'color';


    circle2.events.on('inited', function (event) {
        animateBullet(event.target);
    })


    function animateBullet(circle) {
        var animation = circle.animate([{ property: 'scale',
            from: 1 / chart.zoomLevel, to: 5 / chart.zoomLevel },
            { property: 'opacity', from: 1, to: 0 }],
            1000,
            am4core.ease.circleOut);
        animation.events.on('animationended', function (event) {
            animateBullet(event.target.object);
        })
    }

    var colorSet = new am4core.ColorSet();

    imageSeries.data = [{
        'title': 'Brussels',
        'latitude': 50.8371,
        'longitude': 4.3676,
        'color': colorSet.next()
    }, {
        'title': 'Copenhagen',
        'latitude': 55.6763,
        'longitude': 12.5681,
        'color': colorSet.next()
    }, {
        'title': 'Paris',
        'latitude': 48.8567,
        'longitude': 2.3510,
        'color': colorSet.next()
    }, {
        'title': 'Reykjavik',
        'latitude': 64.1353,
        'longitude': -21.8952,
        'color': colorSet.next()
    }, {
        'title': 'Moscow',
        'latitude': 55.7558,
        'longitude': 37.6176,
        'color': colorSet.next()
    }, {
        'title': 'Madrid',
        'latitude': 40.4167,
        'longitude': -3.7033,
        'color': colorSet.next()
    }, {
        'title': 'London',
        'latitude': 51.5002,
        'longitude': -0.1262,
        'url': 'http://www.google.co.uk',
        'color': colorSet.next()
    }, {
        'title': 'Peking',
        'latitude': 39.9056,
        'longitude': 116.3958,
        'color': colorSet.next()
    }, {
        'title': 'New Delhi',
        'latitude': 28.6353,
        'longitude': 77.2250,
        'color': colorSet.next()
    }, {
        'title': 'Tokyo',
        'latitude': 35.6785,
        'longitude': 139.6823,
        'url': 'http://www.google.co.jp',
        'color': colorSet.next()
    }, {
        'title': 'Ankara',
        'latitude': 39.9439,
        'longitude': 32.8560,
        'color': colorSet.next()
    }, {
        'title': 'Buenos Aires',
        'latitude': -34.6118,
        'longitude': -58.4173,
        'color': colorSet.next()
    }, {
        'title': 'Brasilia',
        'latitude': -15.7801,
        'longitude': -47.9292,
        'color': colorSet.next()
    }, {
        'title': 'Ottawa',
        'latitude': 45.4235,
        'longitude': -75.6979,
        'color': colorSet.next()
    }, {
        'title': 'Washington',
        'latitude': 38.8921,
        'longitude': -77.0241,
        'color': colorSet.next()
    }, {
        'title': 'Kinshasa',
        'latitude': -4.3369,
        'longitude': 15.3271,
        'color': colorSet.next()
    }, {
        'title': 'Cairo',
        'latitude': 30.0571,
        'longitude': 31.2272,
        'color': colorSet.next()
    }, {
        'title': 'Pretoria',
        'latitude': -25.7463,
        'longitude': 28.1876,
        'color': colorSet.next()
    }];

}); // end am4core.ready()

<div class="card card-bordered">
    <div class="card-body">
        <div id="kt_amcharts_1" style="height: 500px;"></div>
    </div>
</div>

<script src="https://cdn.amcharts.com/lib/4/geodata/worldLow.js"></script>

Animated Map

Simply define a blank divwith a unique idin your HTML markup. Then initialize the chart via javascript.

JAVASCRIPT
HTML

am4core.ready(function () {

    // Themes begin
    am4core.useTheme(am4themes_animated);
    // Themes end

    // Create map instance
    chart = am4core.create('kt_amcharts_2', am4maps.MapChart);
    chart.geodata = am4geodata_worldLow;
    chart.projection = new am4maps.projections.Miller();
    chart.homeZoomLevel = 2.5;
    chart.homeGeoPoint = {
        latitude: 38,
        longitude: -60
    };

    // Create map polygon series
    var polygonSeries = chart.series.push(new am4maps.MapPolygonSeries());
    polygonSeries.useGeodata = true;
    polygonSeries.mapPolygons.template.fill = chart.colors.getIndex(0).lighten(0.5);
    polygonSeries.mapPolygons.template.nonScalingStroke = true;
    polygonSeries.exclude = ['AQ'];

    // Add line bullets
    var cities = chart.series.push(new am4maps.MapImageSeries());
    cities.mapImages.template.nonScaling = true;

    var city = cities.mapImages.template.createChild(am4core.Circle);
    city.radius = 6;
    city.fill = chart.colors.getIndex(0).brighten(-0.2);
    city.strokeWidth = 2;
    city.stroke = am4core.color('#fff');

    function addCity(coords, title) {
        var city = cities.mapImages.create();
        city.latitude = coords.latitude;
        city.longitude = coords.longitude;
        city.tooltipText = title;
        return city;
    }

    var paris = addCity({ 'latitude': 48.8567, 'longitude': 2.3510 }, 'Paris');
    var toronto = addCity({ 'latitude': 43.8163, 'longitude': -79.4287 }, 'Toronto');
    var la = addCity({ 'latitude': 34.3, 'longitude': -118.15 }, 'Los Angeles');
    var havana = addCity({ 'latitude': 23, 'longitude': -82 }, 'Havana');

    // Add lines
    var lineSeries = chart.series.push(new am4maps.MapArcSeries());
    lineSeries.mapLines.template.line.strokeWidth = 2;
    lineSeries.mapLines.template.line.strokeOpacity = 0.5;
    lineSeries.mapLines.template.line.stroke = city.fill;
    lineSeries.mapLines.template.line.nonScalingStroke = true;
    lineSeries.mapLines.template.line.strokeDasharray = '1,1';
    lineSeries.zIndex = 10;

    var shadowLineSeries = chart.series.push(new am4maps.MapLineSeries());
    shadowLineSeries.mapLines.template.line.strokeOpacity = 0;
    shadowLineSeries.mapLines.template.line.nonScalingStroke = true;
    shadowLineSeries.mapLines.template.shortestDistance = false;
    shadowLineSeries.zIndex = 5;

    function addLine(from, to) {
        var line = lineSeries.mapLines.create();
        line.imagesToConnect = [from, to];
        line.line.controlPointDistance = -0.3;

        var shadowLine = shadowLineSeries.mapLines.create();
        shadowLine.imagesToConnect = [from, to];

        return line;
    }

    addLine(paris, toronto);
    addLine(toronto, la);
    addLine(la, havana);

    // Add plane
    var plane = lineSeries.mapLines.getIndex(0).lineObjects.create();
    plane.position = 0;
    plane.width = 48;
    plane.height = 48;

    plane.adapter.add('scale', function (scale, target) {
        return 0.5 * (1 - (Math.abs(0.5 - target.position)));
    })

    var planeImage = plane.createChild(am4core.Sprite);
    planeImage.scale = 0.08;
    planeImage.horizontalCenter = 'middle';
    planeImage.verticalCenter = 'middle';
    planeImage.path = 'm2,106h28l24,30h72l-44,-133h35l80,132h98c21,0 21,34 0,34l-98,0 -80,134h-35l43,-133h-71l-24,30h-28l15,-47';
    planeImage.fill = chart.colors.getIndex(2).brighten(-0.2);
    planeImage.strokeOpacity = 0;

    var shadowPlane = shadowLineSeries.mapLines.getIndex(0).lineObjects.create();
    shadowPlane.position = 0;
    shadowPlane.width = 48;
    shadowPlane.height = 48;

    var shadowPlaneImage = shadowPlane.createChild(am4core.Sprite);
    shadowPlaneImage.scale = 0.05;
    shadowPlaneImage.horizontalCenter = 'middle';
    shadowPlaneImage.verticalCenter = 'middle';
    shadowPlaneImage.path = 'm2,106h28l24,30h72l-44,-133h35l80,132h98c21,0 21,34 0,34l-98,0 -80,134h-35l43,-133h-71l-24,30h-28l15,-47';
    shadowPlaneImage.fill = am4core.color('#000');
    shadowPlaneImage.strokeOpacity = 0;

    shadowPlane.adapter.add('scale', function (scale, target) {
        target.opacity = (0.6 - (Math.abs(0.5 - target.position)));
        return 0.5 - 0.3 * (1 - (Math.abs(0.5 - target.position)));
    })

    // Plane animation
    var currentLine = 0;
    var direction = 1;
    function flyPlane() {

        // Get current line to attach plane to
        plane.mapLine = lineSeries.mapLines.getIndex(currentLine);
        plane.parent = lineSeries;
        shadowPlane.mapLine = shadowLineSeries.mapLines.getIndex(currentLine);
        shadowPlane.parent = shadowLineSeries;
        shadowPlaneImage.rotation = planeImage.rotation;

        // Set up animation
        var from, to;
        var numLines = lineSeries.mapLines.length;
        if (direction == 1) {
            from = 0
            to = 1;
            if (planeImage.rotation != 0) {
                planeImage.animate({ to: 0, property: 'rotation' }, 1000).events.on('animationended', flyPlane);
                return;
            }
        }
        else {
            from = 1;
            to = 0;
            if (planeImage.rotation != 180) {
                planeImage.animate({ to: 180, property: 'rotation' }, 1000).events.on('animationended', flyPlane);
                return;
            }
        }

        // Start the animation
        var animation = plane.animate({
            from: from,
            to: to,
            property: 'position'
        }, 5000, am4core.ease.sinInOut);
        animation.events.on('animationended', flyPlane)
        /*animation.events.on('animationprogress', function(ev) {
            var progress = Math.abs(ev.progress - 0.5);
            //console.log(progress);
            //planeImage.scale += 0.2;
        });*/

        shadowPlane.animate({
            from: from,
            to: to,
            property: 'position'
        }, 5000, am4core.ease.sinInOut);

        // Increment line, or reverse the direction
        currentLine += direction;
        if (currentLine < 0) {
            currentLine = 0;
            direction = 1;
        }
        else if ((currentLine + 1) > numLines) {
            currentLine = numLines - 1;
            direction = -1;
        }

    }

    // Go!
    flyPlane();

}); // end am4core.ready()

<div class="card card-bordered">
    <div class="card-body">
        <div id="kt_amcharts_2" style="height: 500px;"></div>
    </div>
</div>

<script src="https://cdn.amcharts.com/lib/4/geodata/worldLow.js"></script>

Rotating Map

Simply define a blank divwith a unique idin your HTML markup. Then initialize the chart via javascript. With amCharts 4 you can create amazing Map charts and you don’t have to be limited to flattened representation of Earth. As you can see in this demo, you can use an orthographic projection to display the planet as an interactive globe.

JAVASCRIPT
HTML

am4core.ready(function () {

    // Themes begin
    am4core.useTheme(am4themes_animated);
    // Themes end

    // Create map instance
    chart = am4core.create('kt_amcharts_3', am4maps.MapChart);
    var interfaceColors = new am4core.InterfaceColorSet();

    try {
        chart.geodata = am4geodata_worldLow;
    }
    catch (e) {
        chart.raiseCriticalError(new Error('Map geodata could not be loaded.
        Please download the latest
        <a href=\'https://www.amcharts.com/download/download-v4/\'>amcharts geodata</a>
        and extract its contents into the same directory as your amCharts files.'));
    }


    var label = chart.createChild(am4core.Label)
    label.text = '12 months (3/7/2019 data) rolling measles
incidence per 1'000'000 total population.

    Bullet size uses logarithmic scale.';
    label.fontSize = 12;
    label.align = 'left';
    label.valign = 'bottom'
    label.fill = am4core.color('#927459');
    label.background = new am4core.RoundedRectangle()
    label.background.cornerRadius(10, 10, 10, 10);
    label.padding(10, 10, 10, 10);
    label.marginLeft = 30;
    label.marginBottom = 30;
    label.background.strokeOpacity = 0.3;
    label.background.stroke = am4core.color('#927459');
    label.background.fill = am4core.color('#f9e3ce');
    label.background.fillOpacity = 0.6;

    var dataSource = chart.createChild(am4core.TextLink)
    dataSource.text = 'Data source: WHO';
    dataSource.fontSize = 12;
    dataSource.align = 'left';
    dataSource.valign = 'top'
    dataSource.url = 'https://www.who.int/immunization/monitoring_surveillance/burden/vpd/surveillance_type/active/measles_monthlydata/en/'
    dataSource.urlTarget = '_blank';
    dataSource.fill = am4core.color('#927459');
    dataSource.padding(10, 10, 10, 10);
    dataSource.marginLeft = 30;
    dataSource.marginTop = 30;

    // Set projection
    chart.projection = new am4maps.projections.Orthographic();
    chart.panBehavior = 'rotateLongLat';
    chart.padding(20, 20, 20, 20);

    // Add zoom control
    chart.zoomControl = new am4maps.ZoomControl();

    var homeButton = new am4core.Button();
    homeButton.events.on('hit', function () {
        chart.goHome();
    });

    homeButton.icon = new am4core.Sprite();
    homeButton.padding(7, 5, 7, 5);
    homeButton.width = 30;
    homeButton.icon.path = 'M16,8 L14,8 L14,16 L10,16 L10,10 L6,10 L6,16 L2,16 L2,8 L0,8 L8,0 L16,8 Z M16,8';
    homeButton.marginBottom = 10;
    homeButton.parent = chart.zoomControl;
    homeButton.insertBefore(chart.zoomControl.plusButton);

    chart.backgroundSeries.mapPolygons.template.polygon.fill = am4core.color('#bfa58d');
    chart.backgroundSeries.mapPolygons.template.polygon.fillOpacity = 1;
    chart.deltaLongitude = 20;
    chart.deltaLatitude = -20;

    // limits vertical rotation
    chart.adapter.add('deltaLatitude', function (delatLatitude) {
        return am4core.math.fitToRange(delatLatitude, -90, 90);
    })

    // Create map polygon series

    var shadowPolygonSeries = chart.series.push(new am4maps.MapPolygonSeries());
    shadowPolygonSeries.geodata = am4geodata_continentsLow;

    try {
        shadowPolygonSeries.geodata = am4geodata_continentsLow;
    }
    catch (e) {
        shadowPolygonSeries.raiseCriticalError(new Error('Map geodata could not be loaded.
        Please download the latest
        <a href=\'https://www.amcharts.com/download/download-v4/\'>amcharts geodata</a>
        and extract its contents into the same directory as your amCharts files.'));
    }

    shadowPolygonSeries.useGeodata = true;
    shadowPolygonSeries.dx = 2;
    shadowPolygonSeries.dy = 2;
    shadowPolygonSeries.mapPolygons.template.fill = am4core.color('#000');
    shadowPolygonSeries.mapPolygons.template.fillOpacity = 0.2;
    shadowPolygonSeries.mapPolygons.template.strokeOpacity = 0;
    shadowPolygonSeries.fillOpacity = 0.1;
    shadowPolygonSeries.fill = am4core.color('#000');


    // Create map polygon series
    var polygonSeries = chart.series.push(new am4maps.MapPolygonSeries());
    polygonSeries.useGeodata = true;

    polygonSeries.calculateVisualCenter = true;
    polygonSeries.tooltip.background.fillOpacity = 0.2;
    polygonSeries.tooltip.background.cornerRadius = 20;

    var template = polygonSeries.mapPolygons.template;
    template.nonScalingStroke = true;
    template.fill = am4core.color('#f9e3ce');
    template.stroke = am4core.color('#e2c9b0');

    polygonSeries.calculateVisualCenter = true;
    template.propertyFields.id = 'id';
    template.tooltipPosition = 'fixed';
    template.fillOpacity = 1;

    template.events.on('over', function (event) {
        if (event.target.dummyData) {
            event.target.dummyData.isHover = true;
        }
    })
    template.events.on('out', function (event) {
        if (event.target.dummyData) {
            event.target.dummyData.isHover = false;
        }
    })

    var hs = polygonSeries.mapPolygons.template.states.create('hover');
    hs.properties.fillOpacity = 1;
    hs.properties.fill = am4core.color('#deb7ad');


    var graticuleSeries = chart.series.push(new am4maps.GraticuleSeries());
    graticuleSeries.mapLines.template.stroke = am4core.color('#fff');
    graticuleSeries.fitExtent = false;
    graticuleSeries.mapLines.template.strokeOpacity = 0.2;
    graticuleSeries.mapLines.template.stroke = am4core.color('#fff');


    var measelsSeries = chart.series.push(new am4maps.MapPolygonSeries())
    measelsSeries.tooltip.background.fillOpacity = 0;
    measelsSeries.tooltip.background.cornerRadius = 20;
    measelsSeries.tooltip.autoTextColor = false;
    measelsSeries.tooltip.label.fill = am4core.color('#000');
    measelsSeries.tooltip.dy = -5;

    var measelTemplate = measelsSeries.mapPolygons.template;
    measelTemplate.fill = am4core.color('#bf7569');
    measelTemplate.strokeOpacity = 0;
    measelTemplate.fillOpacity = 0.75;
    measelTemplate.tooltipPosition = 'fixed';



    var hs2 = measelsSeries.mapPolygons.template.states.create('hover');
    hs2.properties.fillOpacity = 1;
    hs2.properties.fill = am4core.color('#86240c');

    polygonSeries.events.on('inited', function () {
        polygonSeries.mapPolygons.each(function (mapPolygon) {
            var count = data[mapPolygon.id];

            if (count > 0) {
                var polygon = measelsSeries.mapPolygons.create();
                polygon.multiPolygon = am4maps.getCircle(mapPolygon.visualLongitude,
                mapPolygon.visualLatitude, Math.max(0.2, Math.log(count) * Math.LN10 / 10));
                polygon.tooltipText = mapPolygon.dataItem.dataContext.name + ': ' + count;
                mapPolygon.dummyData = polygon;
                polygon.events.on('over', function () {
                    mapPolygon.isHover = true;
                })
                polygon.events.on('out', function () {
                    mapPolygon.isHover = false;
                })
            }
            else {
                mapPolygon.tooltipText = mapPolygon.dataItem.dataContext.name + ': no data';
                mapPolygon.fillOpacity = 0.9;
            }

        })
    })


    var data = {
        'AL': 504.38,
        'AM': 6.5,
        'AO': 2.98,
        'AR': 0.32,
        'AT': 10.9,
        'AU': 5.02,
        'AZ': 17.38,
        'BA': 24.45,
        'BD': 13.4,
        'BE': 12.06,
        'BF': 93.37,
        'BG': 1.68,
        'BI': 0.95,
        'BJ': 93.36,
        'BR': 49.42,
        'BT': 10.03,
        'BY': 26.16,
        'CA': 0.96,
        'CD': 69.71,
        'CF': 4.57,
        'CG': 19.7,
        'CH': 6.19,
        'CI': 14.1,
        'CL': 1.4,
        'CM': 41.26,
        'CN': 2.6,
        'CO': 4.48,
        'CY': 7.69,
        'CZ': 23.09,
        'DK': 1.58,
        'EE': 9.91,
        'EG': 0.63,
        'ES': 4.96,
        'FI': 3.27,
        'FR': 43.26,
        'GA': 3.03,
        'GB': 14.3,
        'GE': 809.09,
        'GH': 39.78,
        'GM': 2.45,
        'GN': 45.98,
        'GQ': 23.74,
        'GR': 154.42,
        'HR': 5.46,
        'HU': 1.44,
        'ID': 16.87,
        'IE': 17.56,
        'IL': 412.24,
        'IN': 47.85,
        'IQ': 12.96,
        'IR': 1.13,
        'IT': 44.29,
        'JP': 3.27,
        'KE': 16.8,
        'KG': 253.37,
        'KH': 0.44,
        'KM': 1.26,
        'KZ': 116.3,
        'LA': 1.33,
        'LK': 0.53,
        'LR': 692.27,
        'LS': 5.9,
        'LT': 14.44,
        'LU': 6.95,
        'LV': 6.09,
        'MA': 0.2,
        'MD': 83.75,
        'ME': 319.75,
        'MG': 2386.35,
        'MK': 28.83,
        'ML': 48.68,
        'MM': 40.31,
        'MN': 0.66,
        'MR': 14.65,
        'MT': 11.65,
        'MV': 9.35,
        'MX': 0.04,
        'MY': 86.41,
        'MZ': 13.49,
        'NA': 12.9,
        'NE': 80.88,
        'NG': 31.44,
        'NL': 1.47,
        'NO': 2.47,
        'NP': 10.8,
        'NZ': 9.23,
        'PE': 1.29,
        'PK': 159.14,
        'PL': 8.24,
        'PT': 16.68,
        'RO': 63.05,
        'RS': 473.46,
        'RU': 14.24,
        'RW': 5.45,
        'SE': 2.64,
        'SG': 8.18,
        'SI': 3.37,
        'SK': 112.78,
        'SN': 3.37,
        'SO': 8.03,
        'SS': 19.3,
        'TD': 75.63,
        'TG': 34.84,
        'TH': 81.02,
        'TL': 9.46,
        'TN': 7.8,
        'TR': 7.08,
        'UA': 1439.02,
        'UG': 62.55,
        'US': 1.32,
        'UZ': 0.99,
        'VE': 179.55,
        'ZA': 3.09,
        'ZM': 9.82,
        'ZW': 0.06
    }

}); // end am4core.ready()

<div class="card card-bordered">
    <div class="card-body">
        <div id="kt_amcharts_3" style="height: 500px;"></div>
    </div>
</div>

<script src="https://cdn.amcharts.com/lib/4/geodata/worldLow.js"></script>
<script src="https://cdn.amcharts.com/lib/4/geodata/continentsLow.js"></script>

Timezone Map

Simply define a blank divwith a unique idin your HTML markup. Then initialize the chart via javascript.

JAVASCRIPT
HTML

am4core.ready(function () {

    // Themes begin
    am4core.useTheme(am4themes_frozen);
    am4core.useTheme(am4themes_animated);
    // Themes end

    // Create map instance
    chart = am4core.create('kt_amcharts_4', am4maps.MapChart);
    // Set map definition
    chart.geodata = am4geodata_worldTimeZoneAreasHigh;
    // Set projection
    chart.projection = new am4maps.projections.Miller();
    chart.panBehavior = 'move';

    var startColor = chart.colors.getIndex(0)
    var middleColor = chart.colors.getIndex(7)
    var endColor = chart.colors.getIndex(14)

    var interfaceColors = new am4core.InterfaceColorSet();

    // Create map polygon series
    var polygonSeries = chart.series.push(new am4maps.MapPolygonSeries());
    // Make map load polygon (like country names) data from GeoJSON
    polygonSeries.useGeodata = true;
    polygonSeries.calculateVisualCenter = true;

    var polygonTemplate = polygonSeries.mapPolygons.template;
    polygonTemplate.fillOpacity = 0.6;
    polygonTemplate.nonScalingStroke = true;
    polygonTemplate.strokeWidth = 1;
    polygonTemplate.stroke = interfaceColors.getFor('background');
    polygonTemplate.strokeOpacity = 1;

    polygonTemplate.adapter.add('fill', function (fill, target) {

        if (target.dataItem.index > 0) {
            return chart.colors.getIndex(target.dataItem.index);
        }
        return fill;
    })
    /// add country borders
    // Create map polygon series
    /*
    var countrySeries = chart.series.push(new am4maps.MapPolygonSeries());
    // Make map load polygon (like country names) data from GeoJSON
    countrySeries.useGeodata = true;
    countrySeries.geodata = am4geodata_worldLow;

    var countryPolygonTemplate = countrySeries.mapPolygons.template;
    countryPolygonTemplate.fillOpacity = 0;
    countryPolygonTemplate.nonScalingStroke = true;
    countryPolygonTemplate.strokeWidth = 1;
    countryPolygonTemplate.stroke = interfaceColors.getFor('background');
    countryPolygonTemplate.strokeOpacity = 0.3;
    */

    // Create map polygon series
    var boundsSeries = chart.series.push(new am4maps.MapPolygonSeries());
    boundsSeries.geodata = am4geodata_worldTimeZonesHigh;
    boundsSeries.useGeodata = true;
    boundsSeries.mapPolygons.template.fill = am4core.color(interfaceColors.getFor('alternativeBackground'));
    boundsSeries.mapPolygons.template.fillOpacity = 0.07;
    boundsSeries.mapPolygons.template.nonScalingStroke = true;
    boundsSeries.mapPolygons.template.strokeWidth = 0.5;
    boundsSeries.mapPolygons.template.strokeOpacity = 1;
    boundsSeries.mapPolygons.template.stroke = interfaceColors.getFor('background');
    boundsSeries.tooltipText = '{id}';


    var hs = polygonTemplate.states.create('hover');
    hs.properties.fillOpacity = 1;

    var bhs = boundsSeries.mapPolygons.template.states.create('hover');
    bhs.properties.fillOpacity = 0.3;


    polygonSeries.mapPolygons.template.events.on('over', function (event) {
        var polygon = boundsSeries.getPolygonById(event.target.dataItem.dataContext.id);
        if (polygon) {
            polygon.isHover = true;
        }
    })

    polygonSeries.mapPolygons.template.events.on('out', function (event) {
        var polygon = boundsSeries.getPolygonById(event.target.dataItem.dataContext.id);
        if (polygon) {
            polygon.isHover = false;
        }
    })


    var labelSeries = chart.series.push(new am4maps.MapImageSeries());
    var label = labelSeries.mapImages.template.createChild(am4core.Label);
    label.text = '{id}';
    label.strokeOpacity = 0;
    label.fill = am4core.color('#000000');
    label.horizontalCenter = 'middle';
    label.fontSize = 9;
    label.nonScaling = true;


    labelSeries.mapImages.template.adapter.add('longitude', (longitude, target) => {
        target.zIndex = 100000;

        var polygon = polygonSeries.getPolygonById(target.dataItem.dataContext.id);
        if (polygon) {
            return polygon.visualLongitude
        }
        return longitude;
    })

    labelSeries.mapImages.template.adapter.add('latitude', (latitude, target) => {
        var polygon = polygonSeries.getPolygonById(target.dataItem.dataContext.id);
        if (polygon) {
            return polygon.visualLatitude
        }
        return latitude;
    })


    var button = chart.createChild(am4core.SwitchButton);
    button.align = 'right';
    button.marginTop = 40;
    button.marginRight = 40;
    button.valign = 'top';
    button.leftLabel.text = 'Map';
    button.rightLabel.text = 'Globe';

    button.events.on('toggled', function () {

        chart.deltaLatitude = 0;
        chart.deltaLongitude = 0;
        chart.deltaGamma = 0;

        if (button.isActive) {
            chart.projection = new am4maps.projections.Orthographic;
            chart.panBehavior = 'rotateLongLat';
        }
        else {
            chart.projection = new am4maps.projections.Miller;
            chart.panBehavior = 'move';
        }
    })

    polygonSeries.events.on('datavalidated', function () {
        labelSeries.data = polygonSeries.data;
    })

}); // end am4core.ready()

<div class="card card-bordered">
    <div class="card-body">
        <div id="kt_amcharts_4" style="height: 500px;"></div>
    </div>
</div>

<script src="https://cdn.amcharts.com/lib/4/geodata/worldTimeZoneAreasHigh.js"></script>
<script src="https://cdn.amcharts.com/lib/4/geodata/worldTimeZonesHigh.js"></script>