Demo: Simple & Lightweight Animated Pie Chart Plugin

Easy-pie-chart is a very simple, lightweight and highly customizable jQuery plugin that uses HTML5 canvas element to render simple pie charts for single values only. It can create sharp canvas pie chart without any extra effort or coding. It has many customizable options that can easily use to customize the chart appearance as you need.

Features:

Easy-pie-chart is a highly customizable plugin.
Very easy to implement and customize.
Simple and lightweight.
Resolution independent (retina optimized)
Supports on all major browsers and devices.

framework support

Vanilla JS (no dependencies) (~872 bytes)
jQuery plugin (~921 bytes)
Angular Module (~983 bytes)

Install with Bower

$ bower install jquery.easy-pie-chart

How to use it:

1. Include the Javascript jquery.easypiechart.js at the bottom of the web page.

<script src="/path/to/jquery.easypiechart.js"></script>

2. Add the basic HTML to the page.

<div class="chart" data-percent="73" data-scale-color="#ffb400">73%</div>

3. Initialize the plugin and we're ready to go.

$(function() {
    $('.chart').easyPieChart({
        //your options goes here
    });
});

Vanilla JS

var element = document.querySelector('.chart');
new EasyPieChart(element, {
    // your options goes here
});

AngularJS

<div ng-controller="chartCtrl">
  <div easypiechart options="options" percent="percent"></div>
</div>

var app = angular.module('app', ['easypiechart']);
app.controller('chartCtrl', ['$scope', function ($scope) {
    $scope.percent = 65;
    $scope.options = {
        animate:{
            duration:0,
            enabled:false
        },
        barColor:'#2C3E50',
        scaleColor:false,
        lineWidth:20,
        lineCap:'circle'
    };
}]);

Plugin's default options:

Property (Type)	Default	Description
barColor	#ef1e25	The color of the curcular bar. You can either pass a valid css color string, or a function that takes the current percentage as a value and returns a valid css color string.
trackColor	#f2f2f2	The color of the track, or false to disable rendering.
scaleColor	#dfe0e0	The color of the scale lines, false to disable rendering.
scaleLength	5	Length of the scale lines (reduces the radius of the chart).
lineCap	round	Defines how the ending of the bar line looks like. Possible values are: `butt`, `round` and `square`.
lineWidth	3	Width of the chart line in px.
size	110	Size of the pie chart in px. It will always be a square.
rotate	0	Rotation of the complete chart in degrees.
animate	object	Object with time in milliseconds and boolean for an animation of the bar growing (`{ duration: 1000, enabled: true }`), or false to deactivate animations.
easing	defaultEasing	Easing function or string with the name of a jQuery easing function

Callbacks

Callback(params, ...)	Description
onStart(from, to)	Is called at the start of any animation.
onStep(from, to, currentValue)	Is called during animations providing the current value (the method is scoped to the context of th eplugin, so you can access the DOM element via `this.el`).
onStop(from, to)	Is called at the end of any animation.

Plugin api

$(function() {
  // instantiate the plugin
  ...
  // update
  $('.chart').data('easyPieChart').update(40);
  ...
  // disable animation
  $('.chart').data('easyPieChart').disableAnimation();
  ...
  // enable animation
  $('.chart').data('easyPieChart').enableAnimation();
});