JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://jp.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>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.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 src="https://cdn-na.infragistics.com/igniteui/latest/js/i18n/infragistics-ja.js"></script>

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

    <table class="options">
        <tr>
            <td>開始角度:</td>
            <td>
                <div id="angle" class="slider"></div>
            </td>
        </tr>
        <tr>
            <td>半径:</td>
            <td>
                <div id="radius" class="slider"></div>
            </td>
        </tr>
        <tr>
            <td>分解半径</td>
            <td>
                <div id="explodedRadius" class="slider"></div>
            </td>
        </tr>
        <tr>
            <td>ラベルの拡張</td>
            <td>
                <div id="labelExtent" class="slider"></div>
            </td>
        </tr>
        <tr>
            <td>ラベルの位置:</td>
            <td>
                <div class="comboContainer">
                    <select id="labelPosition">
                        <option value="none">なし</option>
                        <option value="center">中央</option>
                        <option value="insideEnd">内部の終了位置</option>
                        <option value="outsideEnd" selected="selected">外部の終了位置</option>
                        <option value="bestFit">最適</option>
  ...

CSS

#chart {
            display:inline-block;
            position: relative;
            float: left;
            margin-right: 10px;
            margin-bottom: 10px;
        }
        #legend {
            display:inline-block;
        }

        .options {
            margin-top: 20px;
        }

        .slider {
            width: 200px;
            height: 10px;
            margin: 10px;
        }

JavaScript

$(function () {

            data = [{ "Budget": 60, "Label": "事務" }, { "Budget": 40, "Label": "セールス" },
                { "Budget": 60, "Label": "IT" }, { "Budget": 40, "Label": "マーケティング" },
                { "Budget": 60, "Label": "開発" }, { "Budget": 20, "Label": "サポート" }];

            $('#chart').igPieChart({
                dataSource: data,
                width: '430px',
                height: '430px',
                valueMemberPath: 'Budget',
                labelMemberPath: 'Label',
                explodedSlices: [2, 3],
                radiusFactor: .6,
                labelsPosition: "outsideEnd",
                leaderLineType: "arc",
                labelExtent: 40,
                legend: { element: 'legend', type: "item" }
            });

            $("#angle").slider({
                slide: function (event, ui) {
                    $("#chart").igPieChart("option", "startAngle", ui.value);
                },
                min: 0,
                max: 360
            });

            $("#radius").slider({
                slide: function (event, ui) {
                    $("#chart").igPieChart("option", "radiusFactor", ui.value / 1000.0);
                },
                min: 0,
                max: 1000,
                value: 600
            });

            $("#labelExtent").slider({
                slide: function (event, ui) {
                    $("#chart").igPieChart("option", "labelExtent", ui.value);
                },
                min: 0,
                max: 50,
                value: 40
            });
            
            $("#explodedRadius").slider({
                slide: function (event, ui) {
                    $("#chart").igPieChart("option", "explodedRadius", ui.value / 100);
                },
                min: 0,
                max: 100,
                value: 20
            });

            $("#labelPosition").igCombo({
                enableClearButton: false,
                mode: "dropdown",
           ...