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">
        <table>
            <tr>
                <td colspan="2" class="tooltip">Test Series: ${item.Value}</td>
            </tr>
        </table>
    </script>

<div>
      

        <table>
            <tr>
                <td>
                    <label>Data Points: </label> 
                </td> 
                <td style="width: 110px; padding: 5px; margin: 10px 5px 5px 10px;">
                    <div id="slider" style="margin: 10px 5px 5px 10px;"></div>    
                </td> 
                <td style="width: 45px; padding: 5px;">
                    <label id="sliderLabel">50000</label>
                </td> 
                <td>
                    <button id="btnRefresh" type="button" style="margin: 10px 5px 5px 10px;">Refresh</button>
                </td> 
                <td>
                    <label>Refresh time: </label><span id="timeText"></span>
                </td> 
               
            </tr>
        </table>
         
    </div>

    <div><span class="message">Generating and assigning data...</span></div>

   <div style="height: 520px; width: 90%; min-width: 210px;">
       <div id="chart"></div>
   </div>

CSS

#chart
        {
            margin-top: 10px;
        }
        .message
        {
            color: darkorange;
            font-weight: bold;
        }
        .tooltip { margin: 0px 5px 0px 5px; }

JavaScript

$(function () {
var currData, currDataSource, doGeneration, startTime = null;
	    var sliderValue = 50000;

	    function doGeneration() {
	        var num = sliderValue, data = [], curr = 10;

	        for (var 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;
	    }

	    function assignData() {
	        startTime = new Date().getTime();
	        $("#chart").igDataChart({
	            dataSource: currData
	        });
	    };

	    $(function () {
	        $("#btnRefresh").click(function () {
	            doGeneration();
	            assignData();
	        });

	        $("#slider").slider({
	            min: 50000,
	            max: 1000000,
	            step: 50000,
	            value: 50000,
	            slide: function (event, ui) {
	                sliderValue = ui.value;
	                $("#sliderLabel").text(ui.value);
	            }
	        });

	        $("#chart").igDataChart({
	            width: "100%",
	            height: "500px",
	            title: "Random Generated Data",
	            axes: [{
	                name: "xAxis",
	                type: "categoryX",
	                label: "Label"
	            }, {
                    name: "yAxis",
                    type: "numericY"
                }],
	            series: [{
	                name: "series1",
	                title: "Test Series",
	                type: "line",
	                xAxis: "xAxis",
	                yAxis: "yAxis",
	                valueMemberPath: "Value",
	                showTooltip: true,
	                isTransitionInEnabled: true,
	                isHighlightingEnabled: true,
	                tooltipTemplate: "tooltipTemplate"
	            }],
	           ...