AmCharts4 labels above and below a PieChart

Question

I'm currently trying to draw some pretty PieCharts with AmCharts4.

The problem is that I have a lot of different and small data in my dataset, which leads to a lot of labels. AmCharts4 aligns the labels only to the left and right on my PieChart which leads to that some labels are not displayed. I do not want to hide any labels.

I searched on google and tried to find sth in the amcharts docs but I was not able to find anything helpful except of this example https://www.codeseek.co/EpicVisionStudio/simple-pie-chart-GroyYx?lang=es. This is exactly what i need but it is based on amcharts3 and i want to use amcharts4, but I'm not able to migrate that example.

Here is the code i tried with AmCharts4:

am4core.ready(() => {
                // Themes begin
                am4core.useTheme(am4themes_material);
                am4core.useTheme(am4themes_animated);
                // Themes end

                // Create chart instance
                const chart = am4core.create('chartdiv', am4charts.PieChart);
                // Add data
                // chart.data = this.portfolioSecurityData;
                chart.data = [
                    {
                        country: 'Account Status',
                        litres: 501.9,
                    },
                    {
                        country: 'Random Safety',
                        litres: 301.9,
                    },
                    {
                        country: 'IFTA',
                        litres: 201.1,
                    },
                    {
                        country: 'Vehicle Registration',
                        litres: 165.8,
                    },
                    {
                        country: 'All Trucks In',
                        litres: 139.9,
                    },
                    {
                        country: 'Tandem Weight',
                        litres: 128.3,
                    },
                    {
                        country: 'Site Random',
                        litres: 99,
                    },
                    {
                        country: 'No WIM',
                        litres: 60,
                    },
                    {
                        country: 'more data 1',
                        litres: 50,
                    },
                    {
                        country: 'more data',
                        litres: 50,
                    },
                    {
                        country: 'more data',
                        litres: 50,
                    },
                    {
                        country: 'more data',
                        litres: 50,
                    },
                    {
                        country: 'more data',
                        litres: 50,
                    },
                    {
                        country: 'more data',
                        litres: 50,
                    },
                    {
                        country: 'more data',
                        litres: 50,
                    },
                    {
                        country: 'more data',
                        litres: 50,
                    },
                    {
                        country: 'more data',
                        litres: 50,
                    },
                    {
                        country: 'more data',
                        litres: 50,
                    },
                    {
                        country: 'more data',
                        litres: 50,
                    },
                    {
                        country: 'more data',
                        litres: 50,
                    },
                ];
                chart.exporting.menu = new am4core.ExportMenu();
                // Set inner radius
                chart.innerRadius = am4core.percent(50);
                chart.radius = am4core.percent(80);

                // Add and configure Series
                const pieSeries = chart.series.push(new am4charts.PieSeries());
                pieSeries.dataFields.value = 'litres';
                pieSeries.dataFields.category = 'country';
                pieSeries.slices.template.stroke = am4core.color('#fff');
                pieSeries.slices.template.strokeWidth = 2;
                pieSeries.slices.template.strokeOpacity = 1;

                // This creates initial animation
                pieSeries.hiddenState.properties.opacity = 1;
                pieSeries.hiddenState.properties.endAngle = -90;
                pieSeries.hiddenState.properties.startAngle = -90;

                pieSeries.labels.template.fontSize = 12;

I attched two pictures of the results:

My Amcharts4 result

Good Amcharts3 Example

Answer 1

You have a few options here.

Option #1

Decreasing padding of the labels so they are packed more closely together:

pieSeries.labels.template.padding(1, 1, 1, 1);

Option #2

Unalign labels (like in V3):

pieSeries.alignLabels = false;

Option #3

Group small slices using official Slice Grouper plugin.

var grouper = pieSeries.plugins.push(new am4plugins_sliceGrouper.SliceGrouper());
grouper.clickBehavior = "break";
grouper.threshold = 3;