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

<div class="selectionOptions">
        <select id="seriesType">
            <option value="radialLine" selected="selected">ラジアル折れ線チャート</option>
            <option value="radialColumn">ラジアル柱状チャート</option>
            <option value="radialPie">ラジアル円チャート</option>
        </select>
    </div>

    <div id="chart1"></div>
    <div id="legend1"></div>

CSS

#chart1 {
            position: relative;
            float: left;
            margin-right: 10px;
        }

        #legend1 {
            position: relative;
            float: left;
        }

        .selectionOptions {
            margin-bottom: 10px;
        }

JavaScript

$(function () {
$.ig.loader({
            scriptPath: "https://cdn-na.infragistics.com/igniteui/latest/js/",
            cssPath: "https://cdn-na.infragistics.com/igniteui/latest/css/",
            resources: "igDataChart.Radial,igChartLegend,igCombo",
            ready: function () {

                var data1 = [{ "Label": "管理", "Budget": 60, "Spending": 20 },
                    { "Label": "セールス", "Budget": 40, "Spending": 80 },
                    { "Label": "IT", "Budget": 60, "Spending": 20 },
                    { "Label": "マーケティング", "Budget": 40, "Spending": 80 },
                    { "Label": "開発", "Budget": 60, "Spending": 20 },
                    { "Label": "サポート", "Budget": 20, "Spending": 60 }];

                $("#chart1").igDataChart({
                    width: "500px",
                    height: "500px",
                    dataSource: data1,
                    legend: { element: "legend1" },
                    axes: [{
                        name: "angleAxis",
                        type: "categoryAngle",
                        label: "Label",
                        interval: 1
                    }, {
                        name: "radiusAxis",
                        type: "numericRadius",
                        innerRadiusExtentScale: .1,
                        maximumValue: 100,
                        minimumValue: 0,
                        interval: 25,
                        radiusExtentScale: .6
                    }],
                    series: [{
                        name: "series1",
                        title: '予算',
                        type: "radialLine",
                        angleAxis: "angleAxis",
                        valueAxis: "radiusAxis",
                        valueMemberPath: "Budget",
                        thickness: 5,
                        markerType: "circle"
                    }, {
                        name: "series2",
                        title: '支出',
                       ...