Lightweight plugin to render simple, animated and retina optimized pie charts

• highly customizable
• very easy to implement
• resolution independent (retina optimized)
• uses requestAnimationFrame for smooth animations on modern devices and
• works in all modern browsers, even in IE7+ with excanvas

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

You can also use bower to install the component:

$ bower install jquery.easy-pie-chart

To use the easy pie chart plugin you need to load the current version of jQuery (> 1.6.4) and the source of the plugin.

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="/path/to/jquery.easy-pie-chart.js"></script>
<script>
    $(function() {
        $('.chart').easyPieChart({
            //your options goes here
        });
    });
</script>

If you don't want to use jQuery, implement the Vanilla JS version without any dependencies.

<div class="chart" data-percent="73">73%</div>

<script src="/path/to/easy-pie-chart.js"></script>
<script>
    var element = document.querySelector('.chart');
    new EasyPieChart(element, {
        // your options goes here
    });
</script>

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

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<script src="../dist/angular.easypiechart.min.js"></script>
<script>
    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'
        };
    }]);
</script>

You can pass these options to the initialize function to set a custom look and feel for the plugin.

All callbacks will only be called if animate is not false.

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

// instantiate the plugin
var chart = new EasyPieChart(element, options);
// update
chart.update(40);
// disable animation
chart.disableAnimation();
// enable animation
chart.enableAnimation();

new EasyPieChart(element, {
  barColor: function(percent) {
    var ctx = this.renderer.getCtx();
    var canvas = this.renderer.getCanvas();
    var gradient = ctx.createLinearGradient(0,0,canvas.width,0);
        gradient.addColorStop(0, "#ffe57e");
        gradient.addColorStop(1, "#de5900");
    return gradient;
  }
});

For a value binding you need to add the percent attribute and bind it to your controller.

When using RequireJS you can define your own name. Examples can be found in the demo/requirejs.html.

Native support

• Chrome
• Safari
• FireFox
• Opera
• Internet Explorer 9+

Support for Internet Explorer 7 and 8 with excanvas polyfill.

To run the test just use the karma adapter of grunt: grunt test

Thanks to Rafal Bromirski for designing this dribble shot which inspired me building this plugin.

Copyright (c) 2015 Robert Fleischmann, contributors. Released under the MIT, GPL licenses