CODEWITHSUNDEEP
amcharts
chinthaka
chinthaka

Reputation: 69

Labels are cropped in amCharts

I have attached an pie chart image. My issue is that some labels in pie chart are cropped. How Can I avoid this issue ?

enter image description here

<div class="col-lg-4" style="position: relative;">
    <h3 style="text-align: center; margin-bottom: 10px;">STB Report Summary (Lyca TV)</h3> 
    im<div id="chartdiv3"  style="width:100%;height: 200px;"</div>
</div>

My Chart configuration as follows.

var chart3 = AmCharts.makeChart("chartdiv3", {
    "type": "pie",
    "theme": "light",
    "dataProvider": stock_control_report,
    "titleField": "title",
    "valueField": "value",
    "labelRadius": 5,
    "fontSize":"12",
    "radius": "42%",
    "innerRadius": "0%",
    "balloonText": "[[country]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>",
    "labelText":"[[country]] [[value]]",
    "export": {
        "enabled": true
    }
});

chartdiv3 is the div that i used to load graph.

Upvotes: 0

Views: 1696

Answers (1)

martynasma
martynasma

Reputation: 8595

Normally the chart would calculate the radius of the pie so that all labels fit. However, you have set a fixed pie radius, using radius property.

You have several solutions here:

1) Remove radius line and let the chart calculate radius so everything fits.

var stock_control_report = [{
  "title": "Configured",
  "value": 6033
}, {
  "title": "Agent allocated",
  "value": 487
}, {
  "title": "Slice 3",
  "value": 199
}, {
  "title": "Slice 4",
  "value": 100
}]

var chart3 = AmCharts.makeChart("chartdiv3", {
    "type": "pie",
    "theme": "light",
    "dataProvider": stock_control_report,
    "titleField": "title",
    "valueField": "value",
    "labelRadius": 5,
    "fontSize":"12",
    //"radius": "42%",
    "innerRadius": "0%",
    "balloonText": "[[title]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>",
    "labelText":"[[title]] [[value]]",
    "export": {
        "enabled": true
    }
});
<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/pie.js"></script>
<script src="http://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv3" style="width: 340px; height: 200px;"></div>

2) Use startAngle to rotate the chart so small labels go to the side, rather than up:

var stock_control_report = [{
  "title": "Configured",
  "value": 6033
}, {
  "title": "Agent allocated",
  "value": 487
}, {
  "title": "Slice 3",
  "value": 199
}, {
  "title": "Slice 4",
  "value": 100
}]

var chart3 = AmCharts.makeChart("chartdiv3", {
    "type": "pie",
    "theme": "light",
    "dataProvider": stock_control_report,
    "titleField": "title",
    "valueField": "value",
    "labelRadius": 5,
    "fontSize":"12",
    "radius": "40%",
    "startAngle": 55,
  "maxLabelWidth": 100,
    "innerRadius": "0%",
    "balloonText": "[[title]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>",
    "labelText":"[[title]] [[value]]",
    "export": {
        "enabled": true
    }
});
<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/pie.js"></script>
<script src="http://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv3" style="width: 340px; height: 200px;"></div>

Upvotes: 1

Related Questions