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));
}
});
}