JSFiddle - React, Tailwind, and code Playground

by Nick Hulea

HTML

<HTML>
    <BODY>
        <div id="holder"></div>
    </BODY>
</HTML>

CSS

#holder {background-color: #333}

JavaScript

Raphael(function() {
    var region = Raphael("holder", 160, 160),
        donut = region.donutChartRedux(90,90, 60,44,
                                       [10,20,30,40,50],
                                       ["#AD7FA8", "#4E9A06", "#9c4340", "#536b9a", "orange"], "#333");
    donut.setValue(0, 30);
});
// -------------------------------------------------------
Raphael.fn.donutChartRedux = function(cx, cy, r, rin, values, colors, stroke, startAngle) {
// -------------------------------------------------------
/*
    cx,cy        Center
    r            Outer radius
    rin            Inner radius
    values        Array, numbers
    labels        Array, labels for numbers
    colors        Array, colors for slice
    stroke        Stroke color
*/
// -------------------------------------------------------
/*

    Points on a circle:

        x = r * cos(w)
        y = r * sin(w)

    Finding points relative to chart (where w is in radians, rad = deg * Math.PI/180)

        x = cx + r*Math.cos(w)
        y = cy + r*Math.sin(w)

    In SVG, a circle starts at the 3 o'clock position and goes clockwise.

*/

    var chart = this.set(), paper = this;
    startAngle = startAngle || 0;

    this.customAttributes.slice = function(cx, cy, r, rin, a0, a1) {
        var la = (a1 - a0) > Math.PI;
        //     A(rx ry x-axis-rotation large-arc-flag sweep-flag x y)
        return {
            path: [
                ["M", cx + r*Math.cos(a0), cy + r*Math.sin(a0) ],
                ["L", cx + rin*Math.cos(a0), cy + rin*Math.sin(a0) ],
                ["A", rin,rin, 0,+la,1, cx + rin*Math.cos(a1), cy + rin*Math.sin(a1) ],
                ["L", cx + r*Math.cos(a1), cy + r*Math.sin(a1) ],
                ["A", r,r, 0,+la,0, cx + r*Math.cos(a0), cy + r*Math.sin(a0) ],
                 "Z"
            ]
        };
    };

    function animate() {
        var i = 0, a = Raphael.rad(startAngle), n = values.length, total = 0;
        while (i < n)
            total +=...