JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table>
    <tr>
        <th>1</th>
        <th>2</th>
    </tr>
    <tr>
        <td id="debug1"></td>
        <td id="debug2"></td>
    </tr>
</table>

CSS

svg { border: 1px solid black;}

JavaScript

var width = 600;
var height = 600;
var radius = 250;
var paper = Raphael(0, 0, width, height);


var data = [10, 9, 8, 7, 6, 9, 6, 6, 8, 9, 10, 9];
var labels = ["Career", "Budget", "Debt", "Taxes", "Savings", "Emergency Fund", "Retirement Plan", "Money Knoweldge", "Financial Plan", "Family Protection", "Money Management", "Investments"];

$(function () {




    var segAngle = 360 / data.length;


    for (var j = 0; j < data.length; j++) {
        sector(width / 2, height / 2, data[j] * (radius / 10), j * segAngle, (j * segAngle) + segAngle, labels[j], "segment" + j, {
            fill: indexToHex(j),
            stroke: "none"
        });
    }

    for (var i = 0; i < 10; i++) {
        paper.circle(width / 2, height / 2, (i + 1) * (radius / 10)).attr({
            stroke: "#ccc"
        });
    }

    $("svg").click(function (e) {
        var rad = Math.PI / 180;
        var id = $(this).attr("id");
        // $("#" + id).remove();
        
        var x = e.pageX - width / 2;
        var y = e.pageY - height / 2;
        $("#debug1").html(x);
        $("#debug2").html(y);
        var r = Math.ceil(Math.pow((x * x + y * y), 0.5) / (radius / 10));
        r = r > 10 ? 10 : r;
        var angle = Math.atan2(y, x) * (180 / Math.PI);
        angle = angle > 0 ? angle : 360 + angle;
        var index = Math.floor(angle / (360 / data.length));
        $("#segment" + index).remove();
        data[index] = r;
        sector(width / 2, height / 2, data[index] * (radius / 10), index * segAngle, (index * segAngle) + segAngle, "", "segment" + index, {
            fill: indexToHex(index),
            stroke: "none"
        });
    });

});

function indexToHex(h) {

    var rgb = hsl2rgb(h * (360 / data.length), 100, 50);
    hex = rgbToHex(rgb.r, rgb.g, rgb.b);
    return hex;
}

function rgbToHex(r, g, b) {
    return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
}

function componentToHex(c) {
    var hex = c.toString(16);
    return hex.length == 1...