Simple Pie Chart

Our pie chart uses intelligent way to arrange it's labels so that they would not overlap. You can try adding even more labels by pressing EDIT button and adding more items to the data provider - the labels will be arranged so that they wouldn't overlap. Of course, at some big number of labels they can start overlapping, but in most cases you don't have this number of slices in pie chart. <h2>Grouping of small slices</h2> Our pie chart can group small slices into the "Others" slice automatically. Try add <strong>groupPercent:5</strong> to the charts config - you will see that the smallest slices are grouped into one now. This will also help to avoid overlapping labels, if you have really a lot of them.

HTML

<script type="text/javascript" src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/pie.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/themes/light.js"></script>
<div class="al -stopBinding" >
    <div style="height:100%;padding:16px;">
            <table style="height:100%;width:90%;border:1px solid black">
                <tr style="height:10%">
                    <td style="width:50%">
                        <div style=" color:#814D9A; font-size : 16px;margin-left: 10px ;Font-Weight: Bold;">Absences </div>
                    </td>
                    <td style="width:50%">
                        <div style=" color:#814D9A; font-size : 16px;margin-left: 10px ;Font-Weight: Bold;">Annulations </div>
                    </td>
                </tr>
                <tr>
                  <td><div id="chartdiv"></div></td>
                  <td><div id="totalAnnulation" style="height:90%;"></div></td>
                </tr>
            </table>
    </div>
</div>

CSS

#chartdiv {#chartdiv {
	width		: 100%;
	height		: 500px;
	font-size	: 11px;
}			
	width		: 100%;
	height		: 500px;
	font-size	: 11px;
}			
	width		: 100%;
	height		: 500px;
	font-size	: 11px;
}

JavaScript

var totalAbsences = AmCharts.makeChart("chartdiv",
                {
                    "type": "pie",
                    "balloonText": "[[title]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>",
                    "labelText": "[[title]]<br>[[value]] ([[percents]]%)",
                    "labelsEnabled": false,
                    "outlineColor": "#FFFFFF",
                    "outlineAlpha": 0.8,
                    "outlineThickness": 2,
                    "pulledField": "pulled",
                    "responsive": {
                        "enabled": true
                    },
                    "dataProvider": [{"category":"Raisons Familiales","value":1,"color":"#FEBD69"},{"category":"Refus à l’initiative du salarié","value":1,"color":"#FA6956"},{"category":"Refus à l'initiative du salarié","value":1,"color":"#36BFC7"}],
                    "alphaField": "alpha",
                    "colorField": "color",
                    "titleField": "category",
                    "valueField": "value",
                    "balloon": {},
                    "fontFamily": "Roboto",
                    "thousandsSeparator": " ",
                    "balloon": {
                        "fixedPosition": true
                    },
                    "legend": {
                      "enabled": true,
                      "align": "center",
                      "markerType": "circle"
                    },
                });