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>
<script src="https://igniteui.com/js-data/us-fao-gross-production"></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>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/modules/infragistics.ui.chart.css" rel="stylesheet"></link>

<div class="chart" id="chart"></div>
    <div>
        <div class="optionsPane">
            <div><b>XAxis Options</b></div>
            <div class="optionsColumn">
                <label class="labels">Major Gridlines Visible:</label>
                <input id="XAxisMajorLinesCheckbox" type="checkbox" class="chkBoxMargin" checked=""></input>
                <div>
                    <label class="labels">Major Gridlines Thickness:</label>
                    <label id="XAxisMajorGridlinesThicknessLabel" class="values">1</label>
                    <div id="XAxisMajorGridlinesThicknessSlider" class="slider"></div>
                </div>
                <div>
                    <label class="labels">Major Gridlines Interval:</label>
                    <label id="XAxisMajorGridlinesIntervalLabel" class="values">1</label>
                    <div id="XAxisMajorGridlinesIntervalSlider" class="slider"></div>
                </div>
            </div>
            <div>
                <div class="optionsColumn">
                    <label class="labels">Minor Gridlines Visible:</label>
                    <input...

CSS

.chart {
            position: relative;
            float: left;
            margin-right: 10px;
        }

        .slider {
            width: 250px;
            margin: 10px 10px 4px 6px;
            padding-right: 3px;
            padding-left: 3px;
            display: inline-block;
            float: left;
        } 

        .optionsPane {
            position: relative;
            float: initial;
            width: 270px;
            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;
        }

        .labels {
            padding-right: 2px;
        }

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

JavaScript

$(function () {
var transparentBrush = "rgba(0,0,0,0)";
        var brush;

        $(function () {

            var data = [
                { "CountryName": "China", "Pop1995": 1216, "Pop2005": 1297, "Pop2015": 1361, "Pop2025": 1394 },
                { "CountryName": "India", "Pop1995": 920, "Pop2005": 1090, "Pop2015": 1251, "Pop2025": 1396 },
                { "CountryName": "United States", "Pop1995": 266, "Pop2005": 295, "Pop2015": 322, "Pop2025": 351 },
                { "CountryName": "Indonesia", "Pop1995": 197, "Pop2005": 229, "Pop2015": 256, "Pop2025": 277 },
                { "CountryName": "Brazil", "Pop1995": 161, "Pop2005": 186, "Pop2015": 204, "Pop2025": 218 }
            ];

            $("#chart").igDataChart({
                width: "450px",
                height: "400px",
                title: "Population per Country",
                subtitle: "A comparison of population in 1995 and 2005",
                dataSource: data,
                horizontalZoomable: true,
                verticalZoomable: true,
                windowResponse: "immediate",
                axes: [
                {
                    name: "xAxis",
                    type: "categoryX",
                    title: "Country",
                    label: "CountryName",

                    majorStroke: "Green",
                    minorStroke: 'Red',
                    minorInterval: 2,
                    interval: 2,
                    majorStrokeThickness: 2,
                },
                {
                    name: "yAxis",
                    type: "numericY",
                    minimumValue: 0,
                    title: "Millions of People",

                    majorStroke: "Green",
                    minorStroke: 'Red',
                    minorInterval: 100,
                    interval: 200,
                    majorStrokeThickness: 2,
                }
                ],
                series: [
                {
                    name:...