How to use the @amcharts/amcharts4/charts.PieSeries function in @amcharts/amcharts4

event.target.zIndex = Number.MAX_VALUE;
    selectPolygon(event.target);
})

// Pie chart
let pieChart = chart.seriesContainer.createChild(am4charts.PieChart);
// Set width/heigh of a pie chart for easier positioning only
pieChart.width = 100;
pieChart.height = 100;
pieChart.hidden = true; // can't use visible = false!

// because defauls are 50, and it's not good with small countries
pieChart.chartContainer.minHeight = 1;
pieChart.chartContainer.minWidth = 1;

let pieSeries = pieChart.series.push(new am4charts.PieSeries());
pieSeries.dataFields.value = "value";
pieSeries.dataFields.category = "category";
pieSeries.data = [{ value: 100, category: "First" }, { value: 20, category: "Second" }, { value: 10, category: "Third" }];

let dropShadowFilter = new am4core.DropShadowFilter();
dropShadowFilter.blur = 4;
pieSeries.filters.push(dropShadowFilter);

let sliceTemplate = pieSeries.slices.template;
sliceTemplate.fillOpacity = 1;
sliceTemplate.strokeOpacity = 0;

let activeState = sliceTemplate.states.getKey("active");
activeState.properties.shiftRadius = 0; // no need to pull on click, as country circle under the pie won't make it good

let sliceHoverState = sliceTemplate.states.getKey("hover");

"litres": 139.9
}, {
    "country": "Austria",
    "litres": 128.3
}, {
    "country": "UK",
    "litres": 99
}, {
    "country": "Belgium",
    "litres": 60
}, {
    "country": "The Netherlands",
    "litres": 50
}];

let series = chart.series.push(new charts.PieSeries());
series.dataFields.value = "litres";
series.dataFields.category = "country";

// this creates initial animation
series.hiddenState.properties.opacity = 1;
series.hiddenState.properties.endAngle = -90;
series.hiddenState.properties.startAngle = -90;

chart.legend = new charts.Legend();

"litres": 139.9
}, {
    "country": "Austria",
    "litres": 128.3
}, {
    "country": "UK",
    "litres": 99
}, {
    "country": "Belgium",
    "litres": 60
}, {
    "country": "The Netherlands",
    "litres": 50
}];

let series = chart.series.push(new am4charts.PieSeries());
series.dataFields.value = "litres";
series.dataFields.category = "country";

// this creates initial animation
series.hiddenState.properties.opacity = 1;
series.hiddenState.properties.endAngle = -90;
series.hiddenState.properties.startAngle = -90;

chart.legend = new am4charts.Legend();

}, {
	"country": "Ireland",
	"value": 200
}, {
	"country": "Germany",
	"value": 165
}, {
	"country": "Australia",
	"value": 139
}, {
	"country": "Austria",
	"value": 128
}];


let series = chart.series.push(new charts.PieSeries());
series.dataFields.value = "value";
series.dataFields.radiusValue = "value";
series.dataFields.category = "country";

// this makes initial animation
series.hiddenState.properties.opacity = 1;
series.hiddenState.properties.endAngle = -90;
series.hiddenState.properties.startAngle = -90;

chart.legend = new charts.Legend();

}, {
	"country": "Ireland",
	"value": 200
}, {
	"country": "Germany",
	"value": 165
}, {
	"country": "Australia",
	"value": 139
}, {
	"country": "Austria",
	"value": 128
}];


let series = chart.series.push(new am4charts.PieSeries());
series.dataFields.value = "value";
series.dataFields.radiusValue = "value";
series.dataFields.category = "country";

// this makes initial animation
series.hiddenState.properties.opacity = 1;
series.hiddenState.properties.endAngle = -90;
series.hiddenState.properties.startAngle = -90;

chart.legend = new am4charts.Legend();

"country": "Germany",
    "value": 165
}, {
    "country": "Australia",
    "value": 139
}, {
    "country": "Austria",
    "value": 128
}];

chart.innerRadius = am4core.percent(50);
chart.startAngle = 180;
chart.endAngle = 360;
chart.radius = am4core.percent(70);

let series = chart.series.push(new am4charts.PieSeries());
series.dataFields.value = "value";
series.dataFields.category = "country";

series.slices.template.cornerRadius = 10;
series.slices.template.innerCornerRadius = 7;

let fillModifier = new am4core.RadialGradientModifier();
fillModifier.brightnesses.push(-0.2, -0.2, 0, -0.3);
series.slices.template.fillModifier = fillModifier;

// this creates initial animation
series.hiddenState.properties.opacity = 1;
series.hiddenState.properties.endAngle = -90;
series.hiddenState.properties.startAngle = -90;

createSeries(seriesType, seriesValueX, seriesValueY, seriesName, suffix = "") {
        let series;
        if (seriesType === "Column") {
            series = this.chart.series.push(new am4charts.ColumnSeries());
        } else if (seriesType === "Line") {
            series = this.chart.series.push(new am4charts.LineSeries());
        } else if (seriesType === "StepLine") {
            series = this.chart.series.push(new am4charts.StepLineSeries());
        } else if (seriesType === "Pie") {
            series = this.chart.series.push(new am4charts.PieSeries());
        }

        if (seriesType === "Column") {
            series.dataFields.categoryX = seriesValueX;
            series.dataFields.valueY = seriesValueY;
            series.columns.template.tooltipText = "{valueY.value}";
            series.columns.template.tooltipY = 0;
            series.columns.template.strokeOpacity = 0;
        } else if (seriesType === "Pie") {
            series.dataFields.value = seriesValueY;
            series.dataFields.category = seriesValueX;
            series.slices.template.strokeWidth = 2;
            series.slices.template.strokeOpacity = 1;
        } else {
            series.dataFields.dateX = seriesValueX;
            series.dataFields.valueY = seriesValueY;

createSeries(seriesType, seriesValueX, seriesValueY, seriesName, suffix="") {
        let series;
        if (seriesType === "Column") {
            series = this.chart.series.push(new am4charts.ColumnSeries());
        } else if (seriesType === "Line") {
            series = this.chart.series.push(new am4charts.LineSeries());
        } else if (seriesType === "StepLine") {
            series = this.chart.series.push(new am4charts.StepLineSeries());
        } else if (seriesType === "Pie") {
            series = this.chart.series.push(new am4charts.PieSeries());
        }

        if (seriesType === "Column") {
            series.dataFields.categoryX = seriesValueX;
            series.dataFields.valueY = seriesValueY;
            series.columns.template.tooltipText = "{valueY.value}";
            series.columns.template.tooltipY = 0;
            series.columns.template.strokeOpacity = 0;
        } else if (seriesType === "Pie") {
            series.dataFields.value = seriesValueY;
            series.dataFields.category = seriesValueX;
            series.slices.template.strokeWidth = 2;
            series.slices.template.strokeOpacity = 1;
        } else {
            series.dataFields.dateX = seriesValueX;
            series.dataFields.valueY = seriesValueY;

"country": "Ireland",
    "value": 200
}, {
    "country": "Germany",
    "value": 165
}, {
    "country": "Australia",
    "value": 139
}, {
    "country": "Austria",
    "value": 128
}];

chart.innerRadius = am4core.percent(50);

let series = chart.series.push(new am4charts.PieSeries());
series.dataFields.value = "value";
series.dataFields.category = "country";

series.slices.template.cornerRadius = 10;
series.slices.template.innerCornerRadius = 7;
series.alignLabels = false;
series.labels.template.padding(0,0,0,0);

series.labels.template.bent = true;
series.labels.template.radius = 4;

series.slices.template.states.getKey("hover").properties.scale = 1.1;
series.labels.template.states.create("hover").properties.fill = am4core.color("#fff");

series.slices.template.events.on("over", (event)=>{
    event.target.dataItem.label.isHover = true;