Charts - Pie Chart
One stop solution for perfect admin dashboard!
amCharts! Programming libraries and tools for all your data visualization needs. For official documentation, click here .
Simple Pie Chart
<!-- ========== HTML ========== -->
<div id="chart1" class="op-chart"></div>
<!-- ========== JS ========== -->
<script>
$(function($) {
// chart1
var chart1 = AmCharts.makeChart( "chart1", {
"type": "pie",
"theme": "light",
"fontFamily": "Poppins",
"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
}
} );
});
</script>
Donut with radial gradient
<!-- ========== HTML ========== -->
<div id="chart2" class="op-chart"></div>
<!-- ========== JS ========== -->
<script>
$(function($) {
// chart2
var chart2 = AmCharts.makeChart("chart2", {
"type": "pie",
"theme": "light",
"fontFamily": "Poppins",
"innerRadius": "40%",
"gradientRatio": [-0.4, -0.4, -0.4, -0.4, -0.4, -0.4, 0, 0.1, 0.2, 0.1, 0, -0.2, -0.5],
"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
}],
"balloonText": "[[value]]",
"valueField": "litres",
"titleField": "country",
"balloon": {
"drop": true,
"adjustBorderColor": false,
"color": "#FFFFFF",
"fontSize": 16
},
"export": {
"enabled": true
}
});
});
</script>
Animated Time-Line Pie Chart
<!-- ========== HTML ========== -->
<div id="chart3" class="op-chart"></div>
<!-- ========== JS ========== -->
<script>
$(function($) {
// Chart 3
/**
* Define data for each year
*/
var chartData = {
"1995": [
{ "sector": "Agriculture", "size": 6.6 },
{ "sector": "Mining and Quarrying", "size": 0.6 },
{ "sector": "Manufacturing", "size": 23.2 },
{ "sector": "Electricity and Water", "size": 2.2 },
{ "sector": "Construction", "size": 4.5 },
{ "sector": "Trade (Wholesale, Retail, Motor)", "size": 14.6 },
{ "sector": "Transport and Communication", "size": 9.3 },
{ "sector": "Finance, real estate and business services", "size": 22.5 } ],
"1996": [
{ "sector": "Agriculture", "size": 6.4 },
{ "sector": "Mining and Quarrying", "size": 0.5 },
{ "sector": "Manufacturing", "size": 22.4 },
{ "sector": "Electricity and Water", "size": 2 },
{ "sector": "Construction", "size": 4.2 },
{ "sector": "Trade (Wholesale, Retail, Motor)", "size": 14.8 },
{ "sector": "Transport and Communication", "size": 9.7 },
{ "sector": "Finance, real estate and business services", "size": 22 } ],
"1997": [
{ "sector": "Agriculture", "size": 6.1 },
{ "sector": "Mining and Quarrying", "size": 0.2 },
{ "sector": "Manufacturing", "size": 20.9 },
{ "sector": "Electricity and Water", "size": 1.8 },
{ "sector": "Construction", "size": 4.2 },
{ "sector": "Trade (Wholesale, Retail, Motor)", "size": 13.7 },
{ "sector": "Transport and Communication", "size": 9.4 },
{ "sector": "Finance, real estate and business services", "size": 22.1 } ],
"1998": [
{ "sector": "Agriculture", "size": 6.2 },
{ "sector": "Mining and Quarrying", "size": 0.3 },
{ "sector": "Manufacturing", "size": 21.4 },
{ "sector": "Electricity and Water", "size": 1.9 },
{ "sector": "Construction", "size": 4.2 },
{ "sector": "Trade (Wholesale, Retail, Motor)", "size": 14.5 },
{ "sector": "Transport and Communication", "size": 10.6 },
{ "sector": "Finance, real estate and business services", "size": 23 } ],
"1999": [
{ "sector": "Agriculture", "size": 5.7 },
{ "sector": "Mining and Quarrying", "size": 0.2 },
{ "sector": "Manufacturing", "size": 20 },
{ "sector": "Electricity and Water", "size": 1.8 },
{ "sector": "Construction", "size": 4.4 },
{ "sector": "Trade (Wholesale, Retail, Motor)", "size": 15.2 },
{ "sector": "Transport and Communication", "size": 10.5 },
{ "sector": "Finance, real estate and business services", "size": 24.7 } ],
"2000": [
{ "sector": "Agriculture", "size": 5.1 },
{ "sector": "Mining and Quarrying", "size": 0.3 },
{ "sector": "Manufacturing", "size": 20.4 },
{ "sector": "Electricity and Water", "size": 1.7 },
{ "sector": "Construction", "size": 4 },
{ "sector": "Trade (Wholesale, Retail, Motor)", "size": 16.3 },
{ "sector": "Transport and Communication", "size": 10.7 },
{ "sector": "Finance, real estate and business services", "size": 24.6 } ],
"2001": [
{ "sector": "Agriculture", "size": 5.5 },
{ "sector": "Mining and Quarrying", "size": 0.2 },
{ "sector": "Manufacturing", "size": 20.3 },
{ "sector": "Electricity and Water", "size": 1.6 },
{ "sector": "Construction", "size": 3.1 },
{ "sector": "Trade (Wholesale, Retail, Motor)", "size": 16.3 },
{ "sector": "Transport and Communication", "size": 10.7 },
{ "sector": "Finance, real estate and business services", "size": 25.8 } ],
"2002": [
{ "sector": "Agriculture", "size": 5.7 },
{ "sector": "Mining and Quarrying", "size": 0.2 },
{ "sector": "Manufacturing", "size": 20.5 },
{ "sector": "Electricity and Water", "size": 1.6 },
{ "sector": "Construction", "size": 3.6 },
{ "sector": "Trade (Wholesale, Retail, Motor)", "size": 16.1 },
{ "sector": "Transport and Communication", "size": 10.7 },
{ "sector": "Finance, real estate and business services", "size": 26 } ],
"2003": [
{ "sector": "Agriculture", "size": 4.9 },
{ "sector": "Mining and Quarrying", "size": 0.2 },
{ "sector": "Manufacturing", "size": 19.4 },
{ "sector": "Electricity and Water", "size": 1.5 },
{ "sector": "Construction", "size": 3.3 },
{ "sector": "Trade (Wholesale, Retail, Motor)", "size": 16.2 },
{ "sector": "Transport and Communication", "size": 11 },
{ "sector": "Finance, real estate and business services", "size": 27.5 } ],
"2004": [
{ "sector": "Agriculture", "size": 4.7 },
{ "sector": "Mining and Quarrying", "size": 0.2 },
{ "sector": "Manufacturing", "size": 18.4 },
{ "sector": "Electricity and Water", "size": 1.4 },
{ "sector": "Construction", "size": 3.3 },
{ "sector": "Trade (Wholesale, Retail, Motor)", "size": 16.9 },
{ "sector": "Transport and Communication", "size": 10.6 },
{ "sector": "Finance, real estate and business services", "size": 28.1 } ],
"2005": [
{ "sector": "Agriculture", "size": 4.3 },
{ "sector": "Mining and Quarrying", "size": 0.2 },
{ "sector": "Manufacturing", "size": 18.1 },
{ "sector": "Electricity and Water", "size": 1.4 },
{ "sector": "Construction", "size": 3.9 },
{ "sector": "Trade (Wholesale, Retail, Motor)", "size": 15.7 },
{ "sector": "Transport and Communication", "size": 10.6 },
{ "sector": "Finance, real estate and business services", "size": 29.1 } ],
"2006": [
{ "sector": "Agriculture", "size": 4 },
{ "sector": "Mining and Quarrying", "size": 0.2 },
{ "sector": "Manufacturing", "size": 16.5 },
{ "sector": "Electricity and Water", "size": 1.3 },
{ "sector": "Construction", "size": 3.7 },
{ "sector": "Trade (Wholesale, Retail, Motor)", "size": 14.2 },
{ "sector": "Transport and Communication", "size": 12.1 },
{ "sector": "Finance, real estate and business services", "size": 29.1 } ],
"2007": [
{ "sector": "Agriculture", "size": 4.7 },
{ "sector": "Mining and Quarrying", "size": 0.2 },
{ "sector": "Manufacturing", "size": 16.2 },
{ "sector": "Electricity and Water", "size": 1.2 },
{ "sector": "Construction", "size": 4.1 },
{ "sector": "Trade (Wholesale, Retail, Motor)", "size": 15.6 },
{ "sector": "Transport and Communication", "size": 11.2 },
{ "sector": "Finance, real estate and business services", "size": 30.4 } ],
"2008": [
{ "sector": "Agriculture", "size": 4.9 },
{ "sector": "Mining and Quarrying", "size": 0.3 },
{ "sector": "Manufacturing", "size": 17.2 },
{ "sector": "Electricity and Water", "size": 1.4 },
{ "sector": "Construction", "size": 5.1 },
{ "sector": "Trade (Wholesale, Retail, Motor)", "size": 15.4 },
{ "sector": "Transport and Communication", "size": 11.1 },
{ "sector": "Finance, real estate and business services", "size": 28.4 } ],
"2009": [
{ "sector": "Agriculture", "size": 4.7 },
{ "sector": "Mining and Quarrying", "size": 0.3 },
{ "sector": "Manufacturing", "size": 16.4 },
{ "sector": "Electricity and Water", "size": 1.9 },
{ "sector": "Construction", "size": 4.9 },
{ "sector": "Trade (Wholesale, Retail, Motor)", "size": 15.5 },
{ "sector": "Transport and Communication", "size": 10.9 },
{ "sector": "Finance, real estate and business services", "size": 27.9 } ],
"2010": [
{ "sector": "Agriculture", "size": 4.2 },
{ "sector": "Mining and Quarrying", "size": 0.3 },
{ "sector": "Manufacturing", "size": 16.2 },
{ "sector": "Electricity and Water", "size": 2.2 },
{ "sector": "Construction", "size": 4.3 },
{ "sector": "Trade (Wholesale, Retail, Motor)", "size": 15.7 },
{ "sector": "Transport and Communication", "size": 10.2 },
{ "sector": "Finance, real estate and business services", "size": 28.8 } ],
"2011": [
{ "sector": "Agriculture", "size": 4.1 },
{ "sector": "Mining and Quarrying", "size": 0.3 },
{ "sector": "Manufacturing", "size": 14.9 },
{ "sector": "Electricity and Water", "size": 2.3 },
{ "sector": "Construction", "size": 5 },
{ "sector": "Trade (Wholesale, Retail, Motor)", "size": 17.3 },
{ "sector": "Transport and Communication", "size": 10.2 },
{ "sector": "Finance, real estate and business services", "size": 27.2 } ],
"2012": [
{ "sector": "Agriculture", "size": 3.8 },
{ "sector": "Mining and Quarrying", "size": 0.3 },
{ "sector": "Manufacturing", "size": 14.9 },
{ "sector": "Electricity and Water", "size": 2.6 },
{ "sector": "Construction", "size": 5.1 },
{ "sector": "Trade (Wholesale, Retail, Motor)", "size": 15.8 },
{ "sector": "Transport and Communication", "size": 10.7 },
{ "sector": "Finance, real estate and business services", "size": 28 } ],
"2013": [
{ "sector": "Agriculture", "size": 3.7 },
{ "sector": "Mining and Quarrying", "size": 0.2 },
{ "sector": "Manufacturing", "size": 14.9 },
{ "sector": "Electricity and Water", "size": 2.7 },
{ "sector": "Construction", "size": 5.7 },
{ "sector": "Trade (Wholesale, Retail, Motor)", "size": 16.5 },
{ "sector": "Transport and Communication", "size": 10.5 },
{ "sector": "Finance, real estate and business services", "size": 26.6 } ],
"2014": [
{ "sector": "Agriculture", "size": 3.9 },
{ "sector": "Mining and Quarrying", "size": 0.2 },
{ "sector": "Manufacturing", "size": 14.5 },
{ "sector": "Electricity and Water", "size": 2.7 },
{ "sector": "Construction", "size": 5.6 },
{ "sector": "Trade (Wholesale, Retail, Motor)", "size": 16.6 },
{ "sector": "Transport and Communication", "size": 10.5 },
{ "sector": "Finance, real estate and business services", "size": 26.5 } ]
};
/**
* Create the chart
*/
var currentYear = 1995;
var chart3 = AmCharts.makeChart( "chart3", {
"type": "pie",
"theme": "light",
"fontFamily": "Poppins",
"dataProvider": [],
"valueField": "size",
"titleField": "sector",
"startDuration": 0,
"innerRadius": 80,
"pullOutRadius": 20,
"marginTop": 30,
"titles": [{
"text": "South African Economy"
}],
"allLabels": [{
"y": "54%",
"align": "center",
"size": 25,
"bold": true,
"text": "1995",
"color": "#555"
}, {
"y": "49%",
"align": "center",
"size": 15,
"text": "Year",
"color": "#555"
}],
"listeners": [ {
"event": "init",
"method": function( e ) {
var chart = e.chart;
function getCurrentData() {
var data = chartData[currentYear];
currentYear++;
if (currentYear > 2014)
currentYear = 1995;
return data;
}
function loop() {
chart.allLabels[0].text = currentYear;
var data = getCurrentData();
chart.animateData( data, {
duration: 1000,
complete: function() {
setTimeout( loop, 3000 );
}
} );
}
loop();
}
} ],
"export": {
"enabled": true
}
} );
});
</script>
3D Pie Chart
<!-- ========== HTML ========== -->
<div id="chart4" class="op-chart"></div>
<!-- ========== JS ========== -->
<script>
$(function($) {
// Chart 4
var chart4 = AmCharts.makeChart( "chart4", {
"type": "pie",
"theme": "light",
"fontFamily": "Poppins",
"dataProvider": [ {
"country": "Lithuania",
"value": 260
}, {
"country": "Ireland",
"value": 201
}, {
"country": "Germany",
"value": 65
}, {
"country": "Australia",
"value": 39
}, {
"country": "UK",
"value": 19
}, {
"country": "Latvia",
"value": 10
} ],
"valueField": "value",
"titleField": "country",
"outlineAlpha": 0.4,
"depth3D": 15,
"balloonText": "[[title]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>",
"angle": 30,
"export": {
"enabled": true
}
} );
});
</script>
3D Donut Chart
<!-- ========== HTML ========== -->
<div id="chart5" class="op-chart"></div>
<!-- ========== JS ========== -->
<script>
$(function($) {
// Chart 5
var chart5 = AmCharts.makeChart( "chart5", {
"type": "pie",
"theme": "light",
"fontFamily": "Poppins",
"titles": [ {
"text": "Visitors countries",
"size": 16
} ],
"dataProvider": [ {
"country": "United States",
"visits": 7252
}, {
"country": "China",
"visits": 3882
}, {
"country": "Japan",
"visits": 1809
}, {
"country": "Germany",
"visits": 1322
}, {
"country": "United Kingdom",
"visits": 1122
}, {
"country": "France",
"visits": 414
}, {
"country": "India",
"visits": 384
}, {
"country": "Spain",
"visits": 211
} ],
"valueField": "visits",
"titleField": "country",
"startEffect": "elastic",
"startDuration": 2,
"labelRadius": 15,
"innerRadius": "50%",
"depth3D": 10,
"balloonText": "[[title]]
[[value]] ([[percents]]%)",
"angle": 15,
"export": {
"enabled": true
}
} );
});
</script>