Simple & Lightweight Animated Pie Chart Plugin – easy-pie-chart

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:

Callbacks

Plugin api

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