Map with Dynamic Pie Charts

<h2>Complex map markers</h2> Map image series are not limited to simple shapes to be used as markers. Virtually anything can be used as marker, including other charts, as you can see on this demo. [amb href="https://www.amcharts.com/docs/v4/chart-types/map/#Image_series"]More about map image series[/amb]

by amcharts

HTML

<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<script src="https://cdn.amcharts.com/lib/4/maps.js"></script>
<script src="https://cdn.amcharts.com/lib/4/geodata/continentsLow.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv"></div>

CSS

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

#chartdiv {
  width: 100%;
  height: 500px;
}

JavaScript

/**
 * ---------------------------------------
 * This demo was created using amCharts 4.
 * 
 * For more information visit:
 * https://www.amcharts.com/
 * 
 * Documentation is available at:
 * https://www.amcharts.com/docs/v4/
 * ---------------------------------------
 */

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

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

// Set map definition
chart.geodata = am4geodata_continentsLow;

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

// Create map polygon series
var polygonSeries = chart.series.push(new am4maps.MapPolygonSeries());
polygonSeries.exclude = ["antarctica"];
polygonSeries.useGeodata = true;

// Create an image series that will hold pie charts
var pieSeries = chart.series.push(new am4maps.MapImageSeries());
var pieTemplate = pieSeries.mapImages.template;
pieTemplate.propertyFields.latitude = "latitude";
pieTemplate.propertyFields.longitude = "longitude";

var pieChartTemplate = pieTemplate.createChild(am4charts.PieChart);
pieChartTemplate.adapter.add("data", function(data, target) {
  if (target.dataItem) {
    return target.dataItem.dataContext.pieData;
  }
  else {
    return [];
  }
});
pieChartTemplate.propertyFields.width = "width";
pieChartTemplate.propertyFields.height = "height";
pieChartTemplate.horizontalCenter = "middle";
pieChartTemplate.verticalCenter = "middle";

var pieTitle = pieChartTemplate.titles.create();
pieTitle.text = "{title}";

var pieSeriesTemplate = pieChartTemplate.series.push(new am4charts.PieSeries);
pieSeriesTemplate.dataFields.category = "category";
pieSeriesTemplate.dataFields.value = "value";
pieSeriesTemplate.ticks.template.disabled = true;

var label = pieSeriesTemplate.bullets.push(new am4charts.AxisLabelCircular());
label.text = "TESTING";
label.stroke = am4core.color("black");
label.hideOversized = false;
label.truncate = false;

pieSeries.data = [{
  "title": "North America",
 ...