JSFiddle - React, Tailwind, and code Playground

FULL - Easy pie chart is a jQuery plugin that uses the canvas element to render simple pie charts for single values.

by Jennifer Perrin

HTML

<!-- Throw in a nice looking font just for the fun of it -->
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,700,300,200"/>

<div class="chart tool-tip" data-percent="90" title="Versed">HTML</div>
<div class="chart tool-tip" data-percent="80" title="Proficient">CSS</div>
<div class="chart tool-tip" data-percent="75" title="Proficient">jQuery</div>
<div class="chart tool-tip" data-percent="78" title="Proficient">JS</div>
<div class="chart tool-tip" data-percent="65" title="Adept">PHP</div>
<div class="chart tool-tip" data-percent="65" title="Adept">MySql</div>

CSS

body { margin: 30px; font-family: 'Yanone Kaffeesatz'; }

.chart {float: left; margin: 5px;}

/* ========================================================
   PIE CHARTS
   ===================================================== */
.easyPieChart { position: relative; text-align: center;}
.easyPieChart canvas { position: absolute; top: 0; left: 0;}

/* ========================================================
   Tool-Tip
   ===================================================== */
.tooltip {
    display:none;
    position:absolute;
    border:1px solid #111;
    background-color:#333;
    border-radius:5px;
    padding:10px;
    color:#e7e7e7;
    margin-top: -50px;
}

JavaScript

// Generated by CoffeeScript 1.3.3
/*
Easy pie chart is a jquery plugin to display simple animated pie charts for only one value

Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.

Built on top of the jQuery library (http://jquery.com)

@source: http://github.com/rendro/easy-pie-chart/
@autor: Robert Fleischmann
@version: 1.0.1

Inspired by: http://dribbble.com/shots/631074-Simple-Pie-Charts-II?list=popular&offset=210
Thanks to Philip Thrasher for the jquery plugin boilerplate for coffee script
*/


(function() {

    (function($) {
        $.easyPieChart = function(el, options) {
            var addScaleLine, animateLine, drawLine, easeInOutQuad, renderBackground, renderScale, renderTrack, _this = this;
            this.el = el;
            this.$el = $(el);
            this.$el.data("easyPieChart", this);
            this.init = function() {
                var percent;
                _this.options = $.extend({}, $.easyPieChart.defaultOptions, options);
                percent = parseInt(_this.$el.data('percent'), 10);
                _this.percentage = 0;
                _this.canvas = $("<canvas width='" + _this.options.size + "' height='" + _this.options.size + "'></canvas>").get(0);
                _this.$el.append(_this.canvas);
                if (typeof G_vmlCanvasManager !== "undefined" && G_vmlCanvasManager !== null) {
                    G_vmlCanvasManager.initElement(_this.canvas);
                }
                _this.ctx = _this.canvas.getContext('2d');
                _this.ctx.translate(_this.options.size / 2, _this.options.size / 2);
                _this.$el.addClass('easyPieChart');
                _this.$el.css({
                    width: _this.options.size,
                    height: _this.options.size,
                    lineHeight: "" + _this.options.size + "px"
                });
                _this.update(percent);
             ...