Search code examples
amchartsamcharts4

How to reduce PieChart border size(width) in amcharts4?


How to reduce PieChart border size(width) in amcharts like shown below? I want to reduce the first chart border size(width) like second one. I already set innerRadius property to 100 percent.

Image 1 Image 2


Solution

  • You have to increase both the innerRadius and radius to a large enough value to make the circle skinnier.

    chart.innerRadius = am4core.percent(100);
    chart.radius = am4core.percent(100);
    

    Demo:

    var chart = am4core.create("chartdiv", am4charts.PieChart);
    
    chart.data = [{
      "category": "",
      "value": 100
    }];
    
    chart.innerRadius = am4core.percent(100)
    chart.radius = am4core.percent(100) 
    
    var pieSeries = chart.series.push(new am4charts.PieSeries());
    pieSeries.dataFields.value = "value";
    pieSeries.dataFields.category = "category";
    pieSeries.ticks.template.disabled = true;
    pieSeries.labels.template.disabled = true;
    var label = pieSeries.createChild(am4core.Label)
    label.text = "100%";
    label.horizontalCenter = "middle";
    label.verticalCenter = "middle";
    label.fontSize = "2em"; 
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    }
    
    #chartdiv {
      width: 200px;
      height: 200px;
    }
    <script src="https://cdn.amcharts.com/lib/4/core.js"></script>
    <script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
    <div id="chartdiv"></div>