JavaScripting

The definitive source of the best
JavaScript libraries, frameworks, and plugins.


  • ×

    Easy Pie Chart

    Lightweight jQuery plugin to render simple, animated and retina ready pie charts with the HTML5 canvas element
    Filed under 

    • 🔾56%Overall
    • 2,070
    • 30.2 days
    • 🕩528
    • 👥18

    easy-pie-chart

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

    Version Build Status Dependencies Status Analytics

    Features

    • 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

    framework support

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

    Get started

    Installation

    You can also use bower to install the component:

    $ bower install jquery.easy-pie-chart
    

    jQuery

    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>
    

    Vanilla JS

    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>
    

    AngularJS

    <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>
    

    Options

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

    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

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

    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

    jQuery

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

    Vanilla JS

    // instantiate the plugin
    var chart = new EasyPieChart(element, options);
    // update
    chart.update(40);
    // disable animation
    chart.disableAnimation();
    // enable animation
    chart.enableAnimation();
    
    Using a gradient
    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;
      }
    });
    

    AngularJS

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

    RequireJS

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

    Browser Support

    Native support

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

    Support for Internet Explorer 7 and 8 with excanvas polyfill.

    Test

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

    Credits

    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

    Show All