如何摆脱饼图周围多余的空白？ 使用 amcharts 4 库

Question

I have been trying to spread the pie chart I have to cover most of the 'card' I on the page, but no matter how much margin I cut, it either start disappearing behind another border within the card. I noticed that amcharts lib creates a bunch of layers that the developer doesn't have much control over. Anyway, this is what I'm talking about:

Here is the generated HTML code snippet:

Here is my javascript:

 am4core.ready(function () {

            //Themes                
            var chartType = am4charts.PieChart3D;
            var seriesType = new am4charts.PieSeries3D();
        
            //Create Chart and Series 
            var chart = createChart(thisWidget.id, chartType);

            var pieSeries = chart.series.push(seriesType); // 3D Pie Chart

            //Set properties
            chart.hiddenState.properties.opacity = 0; // 3D Pie Chart: this creates initial fade-in
            
            pieSeries.slices.template.cornerRadius = 6;  //Pie Chart with varying Radius + 3D
            pieSeries.colors.step = 3;  //Pie Chart with varying Radius + 3D
            pieSeries.angle = 45;

            //color
            if (colorTheme) {
                pieSeries.colors.list = getAmchartCustomTheme(colorTheme);
            }
                
            //data types 
            pieSeries.dataFields.value = "count";
            pieSeries.dataFields.category = "tag";
            chart.paddingTop = 0;
            chart.marginTop = 0;
            
            // Put a thick white border around each Slice
            pieSeries.slices.template.stroke = am4core.color("#fff");
            pieSeries.slices.template
                // change the cursor on hover to make it apparent the object can be interacted with
                .cursorOverStyle = [
                    {
                        "property": "cursor",
                        "value": "pointer"
                    }
                ];

            //Make the slice move on hover
            var slice = pieSeries.slices.template;
            slice.states.getKey("active").properties.shiftRadius = 0;
            slice.states.getKey("hover").properties.scale = 1;
            slice.states.getKey("hover").properties.shiftRadius = 0.2;

            //increase size of Chart
            chart.svgContainer.htmlElement.style.height = targetHeight;
            chart.svgContainer.autoresize = true;

            //disable Ticks and labels to save space
            pieSeries.labels.template.disabled = true;

            //registering events
            pieSeries.slices.template.events.on("hit", function (ev) {
                var category = ev.target.slice._dataItem.properties.category;
                addInput(category);
            });
            pieSeries.alignLabels = false;       

            // Create a base filter effect (as if it's not there) for the hover to return to
            var shadow = pieSeries.slices.template.filters.push(new am4core.DropShadowFilter);
            shadow.opacity = 0;

            // Create hover state
            var hoverState = pieSeries.slices.template.states.getKey("hover"); // normally we have to create the hover state, in this case it already exists

            // Slightly shift the shadow and make it more prominent on hover
            var hoverShadow = hoverState.filters.push(new am4core.DropShadowFilter);
            hoverShadow.opacity = 0.7;
            hoverShadow.blur = 5;

            //Add Data
            chart.data = displayItems;
           
        })
        
    

Answer 1

strokeOpacity = 0 or strokeWidth = 0 should do the trick.