Easy Pie Chart

Introduction

Easy Pie Chart is a Lightweight jQuery plugin to render and animate nice pie charts with the HTML5 canvas element

How to Setup

HTML Structure

<span id="pie_chart_1" class="easy-pie-chart" data-percent="86">
	<span class="percent head-font">86</span>
</span>

Dependency

JS

<!-- Easy pie chart JS -->
<script src="vendors/easy-pie-chart/dist/jquery.easypiechart.min.js"></script>
<script src="dist/js/easypiechart-data.js"></script>

Initialize Peity Chart JS

if( $('#pie_chart_1').length > 0 ){
	$('#pie_chart_1').easyPieChart({
		barColor : '#00acf0',
		lineWidth: 3,
		animate: 3000,
		size:	50,
		lineCap: 'square',
		scaleColor: '#f5f5f6',
		trackColor: '#f5f5f6',
		onStep: function(from, to, percent) {
			$(this.el).find('.percent').text(Math.round(percent));
		}
	});
}

Last updated