comparison-chart.js

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

var iconPath =
  "M53.5,476c0,14,6.833,21,20.5,21s20.5-7,20.5-21V287h21v189c0,14,6.834,21,20.5,21 c13.667,0,20.5-7,20.5-21V154h10v116c0,7.334,2.5,12.667,7.5,16s10.167,3.333,15.5,0s8-8.667,8-16V145c0-13.334-4.5-23.667-13.5-31 s-21.5-11-37.5-11h-82c-15.333,0-27.833,3.333-37.5,10s-14.5,17-14.5,31v133c0,6,2.667,10.333,8,13s10.5,2.667,15.5,0s7.5-7,7.5-13 V154h10V476 M61.5,42.5c0,11.667,4.167,21.667,12.5,30S92.333,85,104,85s21.667-4.167,30-12.5S146.5,54,146.5,42 c0-11.335-4.167-21.168-12.5-29.5C125.667,4.167,115.667,0,104,0S82.333,4.167,74,12.5S61.5,30.833,61.5,42.5z";

// Comparative Covid19 Cases: Greeks  |  Refugees
var ComparativeCovid19Chart = am4core.create("humandiv", am4charts.SlicedChart);
ComparativeCovid19Chart.hiddenState.properties.opacity = 0; // this makes initial fade in effect

// ComparativeCovid19Chart.data = [
//   {
//     name: "Greeks",
//     value: 116721,
//   },
//   {
//     name: "Refugees",
//     value: 771,
//   },
// ];

var series = ComparativeCovid19Chart.series.push(new am4charts.PictorialStackedSeries());
series.dataFields.value = "value";
series.dataFields.category = "name";
series.alignLabels = true;
series.labels.template.text = "{category}: [bold]{value}[/]";

series.maskSprite.path = iconPath;

series.labels.template.text = "{category}: [bold]{value}[/]";
series.slices.template.tooltipText = "{category}: {value.value}";

series.labelsContainer.width = 100;
ComparativeCovid19Chart.legend = new am4charts.Legend();
ComparativeCovid19Chart.legend.position = "left";
ComparativeCovid19Chart.legend.valign = "bottom";