> For the complete documentation index, see [llms.txt](https://hencework.gitbook.io/pangong/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://hencework.gitbook.io/pangong/charts/easy-pie-chart.md).

# Easy Pie Chart

## Introduction

[Easy Pie Chart](http://rendro.github.io/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**

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

## Dependency

### JS

```markup
<!-- 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

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