JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://igniteui.com/js/modernizr.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.dv.js"></script>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>

<script id="budgetTooltipTemplate" type="text/x-ig-tmpl">
        <div class="ui-chart-tooltip">
            <div class='bold'>${item.Label}</div>
            <div>Budget: <label class='bold'>$${item.Budget}K</label></div>
        </div>
    </script>

<div class="title">Departments</div>
    <div class="subtitle">Budget (inner ring) and Department Size (outer ring)</div>

    
    <div id="chart"></div>

    <br />
    <table class="options" style="max-width: 550px; width: 100%;">
        <tr>
            <td>InnerExtent:</td>
            <td class="optionTdWidth">
                <div id="innerExtent" class="optionTdWidth"></div>
            </td>
        </tr>
        <tr>
            <td>Start Angle for the Budget Series
            </td>
            <td class="optionTdWidth">
                <div id="angleBudget" class="optionTdWidth"></div>
            </td>
        </tr>
        <tr>
            <td>Start Angle for the Department Size Series
            </td>
            <td class="optionTdWidth">
                <div id="angleDepartmentSize" class="optionTdWidth"></div>
            </td>
        </tr>
        <tr>
            <td>Label Position for the Budget Series:</td>
            <td class="optionTdWidth">
                <select id="labelPosition" class="optionTdWidth">
                    <option value="center"...

CSS

.optionTdWidth {
            width: 85px;
        }

        .options td {
            padding-bottom: 7px;
        }
        .title {
            text-align: center;
            width: 100%;
            font:16px Arial, Helvetica, sans-serif;
        }
        .subtitle {
            text-align: center;
            width: 100%;
            margin: 10px 0 20px 0;
            font:12px Arial, Helvetica, sans-serif;
        }
        .bold {
            font-weight: bold;
        }

JavaScript

$(function () {
            var data = [
                { "DepartmentSize": 43, "Budget": 60, "Label": "Administration" },
                { "DepartmentSize": 29, "Budget": 40, "Label": "Sales" },
                { "DepartmentSize": 50, "Budget": 60, "Label": "IT" },
                { "DepartmentSize": 22, "Budget": 40, "Label": "Marketing" },
                { "DepartmentSize": 13, "Budget": 60, "Label": "Development" },
                { "DepartmentSize": 34, "Budget": 20, "Label": "Support" }];

            $("#chart").igDoughnutChart({
                width: "100%",
                height: "550px",
                innerExtent: 20,
                series:
                    [
                        {
                            name: "Budget",
                            labelMemberPath: "Label",
                            valueMemberPath: "Budget",
                            dataSource: data,
                            labelsPosition: "center",
                            showTooltip: true,
                            tooltipTemplate: "budgetTooltipTemplate"
                        },
                        {
                            name: "DepartmentSize",
                            labelMemberPath: "Label",
                            valueMemberPath: "DepartmentSize",
                            dataSource: data,
                            labelsPosition: "outsideEnd",
                            showTooltip: true,
                            tooltipTemplate: "<div class='ui-chart-tooltip'><div class='bold'>${item.Label}</div><div>Department Size: <label class='bold'>${item.DepartmentSize}</label></div></div>"
                        }
                    ]
            });

            $("#angleBudget").slider({
                slide: function (event, ui) {
                    $("#chart").igDoughnutChart("option", "series", [{ name: "Budget", startAngle: ui.value }]);
                },
                min: 0,
                max: 360
         ...