Pangong
  • Getting Started
  • Change log
  • Introduction
    • Installation
    • NPM
    • SASS
    • Grunt
    • API Reference
    • Browser Support
    • Jquery 3.3.1
    • Bootstrap 4.1.3
  • Menu Styles
    • Vertical Menu Style
    • Horizontal Menu Style
    • Horizontal Menu with Top nav
  • Application
    • Chat
    • Calendar
    • Email
  • Social Feed
    • Twitter Feed
  • components
    • Gallery
    • Activity
    • Embeds
    • Colors
  • forms
    • Toggles
    • Range slider
    • Select2
    • Input Spinner
    • Date Picker
    • Color Picker
    • Editor
  • Tables
    • Data Table
    • Responsive Table (tablesaw)
    • Editable Table
  • Charts
    • Morris Chart
    • E-Charts
    • Sparkline Chart
    • Peity Charts
    • Easy Pie Chart
  • Maps
    • Vector Map
    • Google Map
  • ...
    • Credits
Powered by GitBook
On this page
  • Introduction
  • How to Setup
  • HTML Structure
  • Dependency
  • JS
  • Initialize Peity Chart JS

Was this helpful?

  1. Charts

Easy Pie Chart

PreviousPeity ChartsNextVector Map

Last updated 6 years ago

Was this helpful?

Introduction

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));
		}
	});
}
Easy Pie Chart