JSFiddle - React, Tailwind, and code Playground

by Paul Goddard

HTML

<h2>Default</h2>
<div class="pie" data-actual="600" data-total="2000" data-caption="Users using IE"></div>
<br />
<h2>Styled</h2>
<span class="piethick" data-actual="800" data-total="2000" data-caption="Users using Chrome"></span>
<div class="piemulti" data-actual="2000" data-total="2000" data-caption="Users using the internet"></div>
<br />
<h2>Inline</h2>
<div style="width:520px;">
        <span class="piel" data-actual="20" data-total="400"></span>
        <span class="piel" data-actual="300" data-total="400"></span>
        <span class="piel" data-actual="243" data-total="400"></span>
    <div style="text-align:center;"><p>Working with spans not divs to force them next to each other</span>
</div>
        <br />

CSS

h2{line-height: 50px; font-size: 20px; font-family: century gothic; text-indent: 15px; font-weight: bold;}
p{font-family: century Gothic; color: #000; line-height: 30px;}

JavaScript

//  ----------------------------------------------------
//     Jquery Mini Chart Plugin
//     Code By Paul Goddard (Nukeem)
//     Copyright 2012 Paul Goddard
//     If you want square corners I would reccommend using butt for the cap
//  ----------------------------------------------------
(function($) {
    $.fn.extend({

        miniPie: function(options) {

            var defaults = {
                width: '170px',
                height: '180px',
                origin: 270,
                radius: 55,
                x: 90,
                y: 90,
                markers: 20,
                markerWidth: 2,
                markerColor: '#aaa',
                markerCap: 'square',
                markerGap: 10,
                pieWidth: 5,
                pieBgColor: '#eee',
                pieColor: '#c00',
                pieCap: 'round',
                showPercent: true,
                showActual: false,
                valueFont: 'normal 20px century gothic',
                valueFontColor: '#999',
                captionFont: 'normal 14px century gothic',
                captionFontColor: '#999',
                precision: 0
            };
            var opt = $.extend(defaults, options);

            return this.each(function() {
                var cr = function(d) {
                    return d * (Math.PI / 180);
                },
                    cv = document.createElement("canvas"),
                    p = ($(this).data("actual") / $(this).data("total")) * 100,
                    s = cr(p * 3.6),
                    o = cr(opt.origin),
                    c = cv.getContext('2d');

                cv.setAttribute("width", opt.width);
                cv.setAttribute("height", opt.height);
                
                c.lineWidth = opt.markerWidth;
                c.lineCap = opt.markerCap;
                for (i = 0; i < opt.markers; i++) {
                    var l = cr((360 / opt.markers) * i);
                    c.beginPath();
   ...