{"id":13426829,"url":"https://github.com/rendro/easy-pie-chart","last_synced_at":"2025-05-14T10:13:36.333Z","repository":{"id":3814218,"uuid":"4894175","full_name":"rendro/easy-pie-chart","owner":"rendro","description":"easy pie chart is a lightweight plugin to draw simple, animated pie charts for single values","archived":false,"fork":false,"pushed_at":"2019-10-07T13:23:53.000Z","size":367,"stargazers_count":2073,"open_issues_count":94,"forks_count":500,"subscribers_count":104,"default_branch":"master","last_synced_at":"2025-04-09T20:00:54.154Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://rendro.github.io/easy-pie-chart","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rendro.png","metadata":{"files":{"readme":"Readme.md","changelog":"changelog.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2012-07-04T23:02:25.000Z","updated_at":"2025-03-21T00:50:18.000Z","dependencies_parsed_at":"2022-08-10T11:48:00.712Z","dependency_job_id":null,"html_url":"https://github.com/rendro/easy-pie-chart","commit_stats":null,"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rendro%2Feasy-pie-chart","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rendro%2Feasy-pie-chart/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rendro%2Feasy-pie-chart/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rendro%2Feasy-pie-chart/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rendro","download_url":"https://codeload.github.com/rendro/easy-pie-chart/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248176472,"owners_count":21060073,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-31T00:01:45.962Z","updated_at":"2025-04-11T03:38:37.399Z","avatar_url":"https://github.com/rendro.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Libraries","Uncategorized"],"sub_categories":["Charts Libraries","Uncategorized"],"readme":"# easy-pie-chart\n\n\u003e Lightweight plugin to render simple, animated and retina optimized pie charts\n\n![Version](http://img.shields.io/version/2.1.7.png?color=green)\n[![Build Status](https://travis-ci.org/rendro/easy-pie-chart.png)](https://travis-ci.org/rendro/easy-pie-chart)\n[![Dependencies Status](https://david-dm.org/rendro/easy-pie-chart/dev-status.png)](https://david-dm.org/rendro/easy-pie-chart)\n[![Analytics](https://ga-beacon.appspot.com/UA-46840672-1/easy-pie-chart/readme)](https://github.com/igrigorik/ga-beacon)\n\n\n\n## Features\n[![](https://github.com/rendro/easy-pie-chart/raw/master/demo/img/easy-pie-chart.png)](http://drbl.in/ezuc)\n\n* highly customizable\n* very easy to implement\n* resolution independent (retina optimized)\n* uses `requestAnimationFrame` for smooth animations on modern devices and\n* works in all modern browsers, even in IE7+ with [excanvas](https://code.google.com/p/explorercanvas/wiki/Instructions)\n\n#### framework support\n\n* Vanilla JS *(no dependencies)* (~872 bytes)\n* jQuery plugin (~921 bytes)\n* Angular Module (~983 bytes)\n\n\n\n## Get started\n#### Installation\n\nYou can also use [bower](http://bower.io) to install the component:\n\n```\n$ bower install jquery.easy-pie-chart\n```\n\n#### jQuery\n\nTo use the easy pie chart plugin you need to load the current version of jQuery (\u003e 1.6.4) and the source of the plugin.\n\n```html\n\u003cdiv class=\"chart\" data-percent=\"73\" data-scale-color=\"#ffb400\"\u003e73%\u003c/div\u003e\n\n\u003cscript src=\"https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"/path/to/jquery.easy-pie-chart.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n    $(function() {\n        $('.chart').easyPieChart({\n            //your options goes here\n        });\n    });\n\u003c/script\u003e\n```\n\n#### Vanilla JS\n\nIf you don't want to use jQuery, implement the Vanilla JS version without any dependencies.\n\n```html\n\u003cdiv class=\"chart\" data-percent=\"73\"\u003e73%\u003c/div\u003e\n\n\u003cscript src=\"/path/to/easy-pie-chart.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n    var element = document.querySelector('.chart');\n    new EasyPieChart(element, {\n        // your options goes here\n    });\n\u003c/script\u003e\n```\n\n#### AngularJS\n\n```html\n\u003cdiv ng-controller=\"chartCtrl\"\u003e\n    \u003cdiv easypiechart options=\"options\" percent=\"percent\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n\n\u003cscript src=\"https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"../dist/angular.easypiechart.min.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n    var app = angular.module('app', ['easypiechart']);\n    app.controller('chartCtrl', ['$scope', function ($scope) {\n        $scope.percent = 65;\n        $scope.options = {\n            animate:{\n                duration:0,\n                enabled:false\n            },\n            barColor:'#2C3E50',\n            scaleColor:false,\n            lineWidth:20,\n            lineCap:'circle'\n        };\n    }]);\n\u003c/script\u003e\n```\n\n\n\n## Options\nYou can pass these options to the initialize function to set a custom look and feel for the plugin.\n\n\u003ctable\u003e\n    \u003ctr\u003e\n        \u003cth\u003eProperty (Type)\u003c/th\u003e\n        \u003cth\u003eDefault\u003c/th\u003e\n        \u003cth\u003eDescription\u003c/th\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003cstrong\u003ebarColor\u003c/strong\u003e\u003c/td\u003e\n        \u003ctd\u003e#ef1e25\u003c/td\u003e\n        \u003ctd\u003eThe 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.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003cstrong\u003etrackColor\u003c/strong\u003e\u003c/td\u003e\n        \u003ctd\u003e#f2f2f2\u003c/td\u003e\n        \u003ctd\u003eThe color of the track, or false to disable rendering.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003cstrong\u003escaleColor\u003c/strong\u003e\u003c/td\u003e\n        \u003ctd\u003e#dfe0e0\u003c/td\u003e\n        \u003ctd\u003eThe color of the scale lines, false to disable rendering.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003cstrong\u003escaleLength\u003c/strong\u003e\u003c/td\u003e\n        \u003ctd\u003e5\u003c/td\u003e\n        \u003ctd\u003eLength of the scale lines (reduces the radius of the chart).\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003cstrong\u003elineCap\u003c/strong\u003e\u003c/td\u003e\n        \u003ctd\u003eround\u003c/td\u003e\n        \u003ctd\u003eDefines how the ending of the bar line looks like. Possible values are: \u003ccode\u003ebutt\u003c/code\u003e, \u003ccode\u003eround\u003c/code\u003e and \u003ccode\u003esquare\u003c/code\u003e.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003cstrong\u003elineWidth\u003c/strong\u003e\u003c/td\u003e\n        \u003ctd\u003e3\u003c/td\u003e\n        \u003ctd\u003eWidth of the chart line in px.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003cstrong\u003esize\u003c/strong\u003e\u003c/td\u003e\n        \u003ctd\u003e110\u003c/td\u003e\n        \u003ctd\u003eSize of the pie chart in px. It will always be a square.\u003c/td\u003e\n    \u003c/tr\u003e\n        \u003ctr\u003e\n        \u003ctd\u003e\u003cstrong\u003erotate\u003c/strong\u003e\u003c/td\u003e\n        \u003ctd\u003e0\u003c/td\u003e\n        \u003ctd\u003eRotation of the complete chart in degrees.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003cstrong\u003eanimate\u003c/strong\u003e\u003c/td\u003e\n        \u003ctd\u003eobject\u003c/td\u003e\n        \u003ctd\u003eObject with time in milliseconds and boolean for an animation of the bar growing (\u003ccode\u003e{ duration: 1000, enabled: true }\u003c/code\u003e), or false to deactivate animations.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003cstrong\u003eeasing\u003c/strong\u003e\u003c/td\u003e\n        \u003ctd\u003edefaultEasing\u003c/td\u003e\n        \u003ctd\u003eEasing function or string with the name of a \u003ca href=\"http://gsgd.co.uk/sandbox/jquery/easing/\" target=\"_blank\"\u003ejQuery easing function\u003c/a\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n\u003c/table\u003e\n\n\n\n## Callbacks\nAll callbacks will only be called if `animate` is not `false`.\n\n\u003ctable\u003e\n    \u003ctr\u003e\n        \u003cth\u003eCallback(params, ...)\u003c/th\u003e\n        \u003cth\u003eDescription\u003c/th\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003cstrong\u003eonStart(from, to)\u003c/strong\u003e\u003c/td\u003e\n        \u003ctd\u003eIs called at the start of any animation.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003cstrong\u003eonStep(from, to, currentValue)\u003c/strong\u003e\u003c/td\u003e\n        \u003ctd\u003eIs 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 \u003ccode\u003ethis.el\u003c/code\u003e).\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003cstrong\u003eonStop(from, to)\u003c/strong\u003e\u003c/td\u003e\n        \u003ctd\u003eIs called at the end of any animation.\u003c/td\u003e\n    \u003c/tr\u003e\n\u003c/table\u003e\n\n\n\n## Plugin api\n#### jQuery\n\n```javascript\n$(function() {\n    // instantiate the plugin\n    ...\n    // update\n    $('.chart').data('easyPieChart').update(40);\n    ...\n    // disable animation\n    $('.chart').data('easyPieChart').disableAnimation();\n    ...\n    // enable animation\n    $('.chart').data('easyPieChart').enableAnimation();\n});\n```\n\n#### Vanilla JS\n\n```javascript\n// instantiate the plugin\nvar chart = new EasyPieChart(element, options);\n// update\nchart.update(40);\n// disable animation\nchart.disableAnimation();\n// enable animation\nchart.enableAnimation();\n```\n\n###### Using a gradient\n\n```javascript\nnew EasyPieChart(element, {\n  barColor: function(percent) {\n    var ctx = this.renderer.getCtx();\n    var canvas = this.renderer.getCanvas();\n    var gradient = ctx.createLinearGradient(0,0,canvas.width,0);\n        gradient.addColorStop(0, \"#ffe57e\");\n        gradient.addColorStop(1, \"#de5900\");\n    return gradient;\n  }\n});\n```\n\n#### AngularJS\n\nFor a value binding you need to add the `percent` attribute and bind it to your controller.\n\n#### RequireJS\n\nWhen using [RequireJS](http://requirejs.org) you can define your own name. Examples can be found in the `demo/requirejs.html`.\n\n\n\n## Browser Support\nNative support\n\n* Chrome\n* Safari\n* FireFox\n* Opera\n* Internet Explorer 9+\n\nSupport for Internet Explorer 7 and 8 with [excanvas](https://code.google.com/p/explorercanvas/wiki/Instructions) polyfill.\n\n\n\n## Test\nTo run the test just use the karma adapter of grunt: `grunt test`\n\n\n\n## Credits\nThanks to [Rafal Bromirski](http://www.paranoida.com/) for designing [this dribble shot](http://drbl.in/ezuc) which inspired me building this plugin.\n\n\n\n## Copyright\nCopyright (c) 2015 Robert Fleischmann, contributors. Released under the MIT, GPL licenses\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frendro%2Feasy-pie-chart","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frendro%2Feasy-pie-chart","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frendro%2Feasy-pie-chart/lists"}