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>
<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="shapeChart" class="chart"></div>
    <div>
        <div class="optionsPane">
            <div><b>X 軸オプション</b></div>
            <div class="optionsColumn"> 

                <div>
                    <label>軸ラベルの角度</label>
                    <label id="xAxisLabelAngleValue" class="values">0</label>
                    <div id="xAxisLabelAngleSlider" class="slider"></div>
                </div>
                <div>
                    <label>軸ラベル フォント サイズ</label>
                    <label id="xAxisLabelFontSizeValue" class="values">12</label>
                    <div id="xAxisLabelFontSizeSlider" class="slider"></div>
                </div>
                <div>
                    <label>軸ラベルのマージン:</label>
                    <label id="xAxisLabelMarginValue" class="values">2</label>
                    <div id="xAxisLabelMarginSlider" class="slider"></div>
                </div>
            </div>
        </div> 

        <div class="optionsPane">
            <div><b>Y 軸オプション</b></div>
            <div class="optionsColumn"> 
                <div>
                    <label>軸ラベルの角度</label>
                    <label id="yAxisLabelAngleValue" class="values">0</label>
                    <div...

CSS

.chart {
            position: relative;
            float: left;
            margin-right: 10px;
        }
         
        .optionsPane {
            position: relative;
            float: initial;
            width: 275px;
            margin: 6px 3px 6px 6px;
            display: inline-block;
            padding-top: 18px;
        }

        .optionsColumn {
            float: left;
            position: relative; 
            margin: 2px;
            padding: 2px;
            display: inline-block;
            -moz-border-radius: 4px;
            -webkit-border-radius: 4px;
            border-radius: 4px;
            border: 1px solid #e0e0e0;
        }

        .slider {
            width: 245px;
            margin: 8px 8px 8px 8px;
            padding-right: 3px;
            padding-left: 3px;
            display: inline-block;
            float: left;
        }

        .selector {
            width: 245px;
            margin: 8px 8px 8px 8px;
            padding-right: 3px;
            padding-left: 3px;
            display: inline-block;
            float: left;
        }
        
        .labels {
            padding-right: 7px;
        }

        .values {
            padding-left: 7px;
            padding-right: 0px;
            width: 30px;
        }

JavaScript

$(function () {
            $("#shapeChart").igShapeChart({
                databaseSource: 'https://www.igniteui.com/data-files/shapes/world_countries_reg.dbf',
                shapeDataSource: 'https://www.igniteui.com/data-files/shapes/world_countries_reg.shp',
                chartType: "polygon",
                width: "600px",
                height: "400px",
                xAxisLabelVisibility: "visible",
                yAxisLabelVisibility: "visible",
                xAxisLabelAngle: 0,
                yAxisLabelAngle: 0,
                xAxisLabelTextColor: "gray",
                yAxisLabelTextColor: "gray",
                xAxisLabelTextStyle: "10pt Verdana",
                yAxisLabelTextStyle: "10pt Verdana",
                xAxisLabelLocation: "outsideBottom",
                yAxisLabelLocation: "outsideRight",
                xAxisLabelVerticalAlignment: "top",
                yAxisLabelHorizontalAlignment: "left",

                xAxisMinimumValue: -180,
                xAxisMaximumValue: 180,
                yAxisMinimumValue: -90,
                yAxisMaximumValue: 90,
                xAxisInterval: 30,
                yAxisInterval: 30,
                isHorizontalZoomEnabled: true,
                isVerticalZoomEnabled: true,
            });

            $("#xAxisLabelAngleSlider").slider(
                {
                    min: -180, max: 180, value: 0,
                    slide: function (e, ui) {
                        $("#shapeChart").igShapeChart("option", "xAxisLabelAngle", ui.value);
                        $("#xAxisLabelAngleValue").text(ui.value);
                    }
                });

            $("#xAxisLabelFontSizeSlider").slider(
                {
                    min: 5, max: 15, value: 10,
                    slide: function (e, ui) {
                        var size = ui.value + "pt";
                        var style = size + " " + "Verdona";
                        $("#shapeChart").igShapeChart("option",...