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>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/modules/infragistics.ui.chart.css" rel="stylesheet"></link>

<script id="tooltipTemplate" type="text/x-jquery-tmpl">
            <div id="tooltip" class="ui-widget-content ui-corner-all">
                <span id="tooltipValue">Value: ${item.Value}</span>
            </div>
        </script>

<div id="chart"></div>
        
        <div class="selectionOptions">
            
            <table>
                <tr>
                    <td>
                        Data Points: <span id="volumeText">5000</span>
                    </td>
                     <td style="width: 10px; min-width: 10px;"></td>
                  <td>
                      Refresh time: <span id="intervalText">10</span>
                    </td>
                    <td>
                         Refreshes Per Second: <span id="refreshCount">0</span>
                    </td>
                 </tr>
               <tr>
                    <td>
                      <div id="volumeSlider" class="sliderBounds" style="margin: 10px 5px 5px 10px;"></div>
                    </td> 
                   <td style="width: 10px; min-width: 10px;"></td>
                   <td>
                        <div id="intervalSlider" class="sliderBounds" style="margin: 10px 5px 5px 10px;"></div>
         ...

CSS

td { vertical-align: top; }
        #chart
        {
            position: relative;
            float: left;
            margin-right: 10px;
        }
        
        .selectionOptions
        {
            clear: left;
            padding-top: 10px;
        }
        
        .slider
        {
            width: 200px;
            height: 10px;
            margin: 10px;
        }

JavaScript

$(function () {
var lblCount = 30, timer = 40, interval, isAdding = false;

            $(function () {
         
                var currData = null,
                    doGeneration = null,
                    startTime = null,
                    doUpdate = null,
                    started = false,
                    intervalId = 0,
                    toggleFeed = null,
                    curr = 10,
                    i = 0,
                    refreshCount = 0;

                doGeneration = function() {
                    var num = 5000, data = [];
                    num = parseInt($("#volumeText").text());

                    for (i = 0; i < num; i++) {
                        if (Math.random() > .5) {
                            curr += Math.random() * 2.0;
                        } else {
                            curr -= Math.random() * 2.0;
                        }
                        var val1 = Math.round(curr * 1000.0) / 1000.0;
                        data[i] = { Label: i.toString(), Value: val1 };
                    }
                    currData = data;
                };

                doGeneration();
                $("#chart").igDataChart({
                    width: "90%",
                    height: "500px",
                    horizontalZoomable: true,
                    verticalZoomable: true,
                    windowResponse: "immediate",
                    dataSource: currData,
                    axes: [{
                            name: "xAxis",
                            type: "categoryX",
                            label: "Label",
                            labelExtent: 30,
                        }, {
                            name: "yAxis",
                            type: "numericY",
                            labelExtent: 50,
                        }],
                    series: [{
                        name: "series1",
                        title: "Test Series",
                        type:...