Stacked Column Series Chart

Code 

            //Stacked Column Series Chart
    const stackedColConfig = {
         //throw error if this element is not present
        type: Charts.STACKED_COLUMN_SERIES_CHART,
        xAxis: {
            category: 'category'
        },
        yAxis: {
          min: 0,
          max: 100
        },
        series: {
            type: CHART_SERIES.STACKED_COLUMN_SERIES,
            list: [{ // Will always be as array
                    color: "#FBC67A",
                    format: "#",
                    name: "Files Modification Alerts",
                    tooltipHTML: "{name} 
 
{valueY.value.formatNumber('#')}
",
                    value: "value1"
                },
                {
                    color: "#88A7EC",
                    format: "#",
                    name: "Files Encryption Alerts",
                    tooltipHTML: "{name} 
 
{valueY.value.formatNumber('#')}
",
                    value: "value2"
                },
                {
                    color: "#88E6AF",
                    format: "#",
                    name: "Files Deletion Alerts",
                    tooltipHTML: "{name} 
 
{valueY.value.formatNumber('#')}
",
                    value: "value3"
                },
                {
                    color: "#EE74A2",
                    format: "#",
                    name: "Files Creation Alerts",
                    tooltipHTML: "{name} 
 
{valueY.value.formatNumber('#')}
",
                    value: "value4",
                    bullet: {
                        type: CHART_BULLETS.LABEL_BULLET,
                        bulletText: "{valueY.total}",
                        fill: '#000',
                        dy: -20,
                        fontSize: 20
                    }
                }
            ]},
        legend: {
            type: CHART_LEGENDS.LEGEND_WITH_VALUE_TEXT,
            position: 'right',
            vAlign: 'bottom',
            value: 'valueY'
        }
    }
    let chart1 = AMChartsFactory.createChart('stackedColumnSeries', stackedColConfig);

    const xAxesTemplate = chart1.getChartObj().xAxes.getIndex(0).renderer.labels.template;
    xAxesTemplate.rotation = -90;
    xAxesTemplate.horizontalCenter = "middle";
    xAxesTemplate.verticalCenter = "middle";
    chart1.bindData(chartData.stackedColumnData);

Column Series


          // Column Series Chart
          const colConfig = {
              //throw error if this element is not present
             type: Charts.COLUMN_SERIES_CHART,
             xAxis: {
                 category: 'country'
             },
             series: {
                 type: CHART_SERIES.COLUMN_SERIES,
                 list: [{ // Will always be as array
                         color: "#FBC87A",
                         format: "#",
                         name: "Files Modification Alerts",
                         tooltipText: "{valueY.value}",
                         value: "visits",
                         adapter: {
                          "fill": (fill, target, key, chart) => {
                           return chart.colors.getIndex(target.dataItem.index);
                         }
                      }
                     }
                 ]
              }
         }
         let chart2 = AMChartsFactory.createChart('columnSeries', colConfig);
         chart2.bindData(chartData.columnSeriesData);
         //Asynchronously bind data to chart
         setTimeout(() => chart2.bindData(chartData.activityData), 5000);

Trend Chart


          // Column Series Chart
    const activityChartConfig = {
    type: Charts.COLUMN_SERIES_CHART,
    xAxis: {
        category: 'country'
    },
    series: {
        type: CHART_SERIES.COLUMN_SERIES,
        list: [{
                color: "#FBC87A",
                format: "#",
                name: "Files Modification Alerts",
                tooltipText: "{valueY.value}",
                value: "visits",
                adapter: {
                "fill": (fill, target, key, chart) => {
                    if(target.dataItem.valueY > 2000){
                        return am4core.color("#EE74A2");
                    }
                    return am4core.color("#8A98B6");;
                }
            }
            }
        ]
    }
    }
    //Bind click events on column series
    chart2.onColumnClick(function(ev) {
        alert("Clicked on " + ev.target.dataItem.categoryX + ": " + ev.target.dataItem.valueY);
    });

   let chart3 = AMChartsFactory.createChart('activityChart', activityChartConfig);
   chart3.hideXAxes();
   chart3.hideYAxes();
   chart3.hideYAxesGridLines();
   chart3.hidexAxesGridLines();
   chart3.bindData(chartData.activityData);

Pie Chart


          // PieChart
    let pieChartConfig = {
       type: Charts.PIE_CHART,
       xAxis: {
           category: 'country'
       },
       series: {
           type: CHART_SERIES.PIE_SERIES,
           list: [{ // Will always be as array
                   tooltipHTML: "{category}: {value}",
                   value: "value",
                   radiusValue: "value"
               }
           ]
        },
        legend: {
            type: CHART_LEGENDS.LEGEND_WITH_VALUE_TEXT,
            position: 'bottom',
            vAlign: 'bottom',
            valueText: '{value}'
        }
   }

   let pieChart = AMChartsFactory.createChart('pieChart', pieChartConfig);
   pieChart.bindData(chartData.pieChartData);
   pieChart.setCornerRadius(6);

World Map


          // world map
    am4core.useTheme(am4themes_animated);
    let mapConfig = {
        type: Maps.WORLD_MAP,
        series: [{
            type: MAP_SERIES.WORLD_MAP_SERIES,
            exclude: ["AQ"],
            tooltipText: "{name}: {value}"
        },
        {
            type: MAP_SERIES.USA_MAP_SERIES,
            tooltipText: "{name}: {value}"
        }]
    }

    let map = AMMapsFactory.createMap('worldmap', mapConfig);
    map.bindData(MAP_SERIES.USA_MAP_SERIES, JSON.parse(JSON.stringify(mapData.USData)));
    map.bindData(MAP_SERIES.WORLD_MAP_SERIES, JSON.parse(JSON.stringify(mapData.worldData)));
    map.addHomeButton();

World Heat Map


          // world heat map
    let heatMapConfig = {
        type: Maps.WORLD_MAP,
        series: [{
            type: MAP_SERIES.WORLD_MAP_SERIES,
            exclude: ["AQ"],
            tooltipText: "{name}: {value}",
            color: "#00B2E0",
            heatRules: {
                colorMin: 4,
                colorMax: -0.3,
                legendMinValue: 1000,
                legendMaxValue: 5000,
            },
            onZoom: (map) => {
                console.log(map);
            }
        }]
    }

    let heatMap = AMMapsFactory.createMap('worldHeatmap', heatMapConfig);
    heatMap.bindData(MAP_SERIES.WORLD_MAP_SERIES, JSON.parse(JSON.stringify(mapData.worldData)));
    heatMap.addZoomControl();
    heatMap.addHomeButton();

Location World Map


          //World capitals map
    let capitalsMapConfig = {
        type: Maps.WORLD_MAP,
        series: [{
            type: MAP_SERIES.WORLD_MAP_SERIES,
            exclude: ["AQ"],
            color: "#00B2E0",
            onZoom: (map, series) => {
                console.log(map);
            }
        },
        {
            type: MAP_SERIES.IMAGE_SERIES,
            latitude: "latitude",
            longitude: "longitude",
            imagePath: "M9,0C4.029,0,0,4.029,0,9s4.029,9,9,9s9-4.029,9-9S13.971,0,9,0z M9,15.93 c-3.83,0-6.93-3.1-6.93-6.93S5.17,2.07,9,2.07s6.93,3.1,6.93,6.93S12.83,15.93,9,15.93 M12.5,9c0,1.933-1.567,3.5-3.5,3.5S5.5,10.933,5.5,9S7.067,5.5,9,5.5 S12.5,7.067,12.5,9z",
            tooltipText: "{title}",
            tooltipHTML: ""
        }
    ]
    }
    let capitalsMap = AMMapsFactory.createMap('capitalsMap', capitalsMapConfig);
    capitalsMap.bindData(MAP_SERIES.IMAGE_SERIES, JSON.parse(JSON.stringify(capitalsData)));
    capitalsMap.addZoomControl();
    capitalsMap.addHomeButton();

Drill Down Location World Map


          //World Heat map with drill down zoom
    let drillDownHeatMapConfig = {
        type: Maps.WORLD_MAP,
        series: [{
            type: MAP_SERIES.DRILL_DOWN_WORLD_SERIES,
            exclude: ["AQ"],
            tooltipText: "{name}: {value}",
            color: "#00B2E0",
            value: 'value1',
            heatRules: {
                colorMin: 4,
                colorMax: -0.3,
                legendMinValue: 1000,
                legendMaxValue: 5000,
            },
            onZoom: (map, target) => {
                map.series.each((mapSeries) => {
                    if(mapSeries.name === MAP_SERIES.IMAGE_SERIES) {
                        if(!mapSeries.visible) {
                            mapSeries.show();
                        }
                        mapSeries.data = JSON.parse(JSON.stringify(capitalsData))
                    }
                });
            }
        },
        {
            type: MAP_SERIES.IMAGE_SERIES,
            latitude: "latitude",
            longitude: "longitude",
            imagePath: "M9,0C4.029,0,0,4.029,0,9s4.029,9,9,9s9-4.029,9-9S13.971,0,9,0z M9,15.93 c-3.83,0-6.93-3.1-6.93-6.93S5.17,2.07,9,2.07s6.93,3.1,6.93,6.93S12.83,15.93,9,15.93 M12.5,9c0,1.933-1.567,3.5-3.5,3.5S5.5,10.933,5.5,9S7.067,5.5,9,5.5 S12.5,7.067,12.5,9z",
            tooltipText: "{title}",
            tooltipHTML: ""
        }
    ]
    }

    let drillDownHeatMap = AMMapsFactory.createMap('worldDrillDownHeatmap', drillDownHeatMapConfig);
    drillDownHeatMap.bindData(MAP_SERIES.WORLD_MAP_SERIES, JSON.parse(JSON.stringify(drillDownMapData)));
    drillDownHeatMap.addZoomControl();
    drillDownHeatMap.addHomeButton((map) => {
        map.series.each((mapSeries) => {
            if([MAP_SERIES.IMAGE_SERIES, MAP_SERIES.DRILL_DOWN_COUNTRY_SERIES].indexOf(mapSeries.name) > -1){
                mapSeries.hide();
            }
        });
    });