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 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="container">

<ul>
<li>
  <div id="chartdiv"></div>			
</li>
<li style="display:none;">
  <div id="chartdiv2"></div>			
</li>
<li style="display:none;">
  <div id="chartdiv3"></div>			
</li>
</ul>
<span class="button prevButton"></span>
<span class="button nextButton"></span>
</div>

CSS

#chartdiv,#chartdiv2,#chartdiv3 {
	width		: 100%;
	height		: 500px;
	font-size	: 11px;
}					
#container .nextButton {
    height: 72px;
    width: 68px;
    position: absolute;
    background: url('http://www.html5marketplace.com/slideshow/images/buttons.png') no-repeat;
    top: 50%;
    margin-top: -36px;
    cursor: pointer;
    z-index: 2000;
    background-position: right top;
    right: 0;
}
#container .prevButton {
    height: 72px;
    width: 68px;
    position: absolute;
    background: url('http://www.html5marketplace.com/slideshow/images/buttons.png') no-repeat;
    top: 50%;
    margin-top: -36px;
    cursor: pointer;
    z-index: 2000;
    background-position: left top;
    left: 0;
}

JavaScript

var chart = AmCharts.makeChart( "chartdiv", {
  "type": "pie",
  "theme": "light",
  "dataProvider": [ {
    "country": "Belgium",
    "litres": 60
  }, {
    "country": "The Netherlands",
    "litres": 50
  } ],
  "valueField": "litres",
  "titleField": "country",
   "balloon":{
   "fixedPosition":true
  },
  "export": {
    "enabled": true
  }
} );

var chart2 = AmCharts.makeChart( "chartdiv2", {
  "type": "pie",
  "theme": "light",
  "dataProvider": [  {
    "country": "UK",
    "litres": 99
  }, {
    "country": "Belgium",
    "litres": 60
  }, {
    "country": "The Netherlands",
    "litres": 50
  } ],
  "valueField": "litres",
  "titleField": "country",
   "balloon":{
   "fixedPosition":true
  },
  "export": {
    "enabled": true
  }
} );

var chart3 = AmCharts.makeChart( "chartdiv3", {
  "type": "pie",
  "theme": "light",
  "dataProvider": [ {
    "country": "UK",
    "litres": 99
  },  {
    "country": "The Netherlands",
    "litres": 50
  } ],
  "valueField": "litres",
  "titleField": "country",
   "balloon":{
   "fixedPosition":true
  },
  "export": {
    "enabled": true
  }
} );


$(window).load(function(){
		var pages = $('#container li'), current=0;
		var currentPage,nextPage;

		$('#container .button').click(function(){
			currentPage= pages.eq(current);
			if($(this).hasClass('prevButton'))
			{

				if (current <= 0)
					current=pages.length-1;
				else
					current=current-1;
			}
			else
			{
				if (current >= pages.length-1)
					current=0;
				else
					current=current+1;
			}
			nextPage = pages.eq(current);	
			currentPage.hide();	
			nextPage.show();		
		});
});