Simple Pie Chart

index.html

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/pie.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>					

script.js

var chart = AmCharts.makeChart( "chartdiv", {
  "type": "pie",
  "theme": "light",
  "dataProvider": [ {
    "country": "Lithuania",
    "litres": 501.9
  }, {
    "country": "Czech Republic",
    "litres": 301.9
  }, {
    "country": "Ireland",
    "litres": 201.1
  }, {
    "country": "Germany",
    "litres": 165.8
  }, {
    "country": "Australia",
    "litres": 139.9
  }, {
    "country": "Austria",
    "litres": 128.3
  }, {
    "country": "UK",
    "litres": 99
  }, {
    "country": "Belgium",
    "litres": 60
  }, {
    "country": "The Netherlands",
    "litres": 50
  } ],
  "valueField": "litres",
  "titleField": "country",
   "balloon":{
   "fixedPosition":true
  },
  "export": {
    "enabled": true
  }
} );

scripts

<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>

Simple Pie Chart.markdown

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.

Grouping of small slices

Our pie chart can group small slices into the "Others" slice automatically. Try add groupPercent:5 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.

Forked from jiansuyan's Pen Simple Pie Chart.

Forked from jiansuyan's Pen Simple Pie Chart.

A Pen by kevinlvhsl on CodePen.

License.

style.css

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