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/financial-data"></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>

<table>
        <tr>
            <td>
                <div id="chart"></div>
            </td>
            <td>
                <div class="options">
                    <div class="optionContainer">

                        <div><input id="axisStokeLines" type="checkbox" class="chkBoxMargin" checked="checked"></input>Axis Stoke Lines</div>
                        <div><input id="axisMajorLines" type="checkbox" class="chkBoxMargin" checked="checked"></input>Axis Major Lines</div>
                        <div><input id="axisMinorLines" type="checkbox" class="chkBoxMargin"></input>Axis Minor Lines</div>
                        <div><input id="axisTickmarks" type="checkbox" class="chkBoxMargin" checked="checked"></input>Axis Tickmarks</div>
                        <div><input id="axisTitles" type="checkbox" class="chkBoxMargin" checked="checked"></input>Axis Titles</div>
                        <div><input id="axisStripes" type="checkbox" class="chkBoxMargin"></input>Axis Stripes</div>
                        <div><input id="axisLabels" type="checkbox" class="chkBoxMargin" checked="checked"></input>Axis Labels</div>
               ...

CSS

td {
            vertical-align: top;
        }

        #chart {
            position: relative;
            float: left;
            margin-right: 5px;
            margin-bottom: 5px;
        }

        #chartLegend {
            left: 10px;
            /*position: absolute;*/
            font-size: 0.857em;
            top: 0px;
        }

        .chkBoxMargin {
            margin: 4px;
        }

        .options {
            float: left;
            font-size: 0.857em;
            line-height: 1.429em;
        }

JavaScript

$(function () {
// variables
        var evntCounter = 0, transperantBrush = "rgba(0,0,0,0)",
            axisStripBrush = "rgba(150,150,150,0.1)",
            axisStokeLinesBrush = "rgba(50,50,50,0.7)",
            axisMajorLinesBrush = "rgba(120,120,120,0.5)",
            axisMinorLinesBrush = "rgba(120,120,120,0.3)",
            axisTitleX = "Date",
            axisTitleY = "Price",
            financialPositiveOutline = "rgba(20,20,20,0.7)",
            financialNegativeOutline = "rgba(20,20,20,0.7)",
            financialPositiveBrush = "rgba(70,140,240,0.7)",
            financialNegativeBrush = "rgba(240,20,20,0.7)",
            financialTrendlineBrush = "rgba(70,140,240,0.7)",
            volumeSeriesBrush = "rgba(90,190,65,0.7)",
            volumeTrendlineBrush = "rgba(190,130,65,0.7)",
            //financialPositiveBrush2 = "#469ff1F",
            //financialNegativeBrush2 = "#8c8d8eF",
            volumeSeriesBrush2 = "#58bf41F",
            trendlineBrush2 = "#bf8641F", brush, negBrush, mType;

        // creating igDataChart
        $(function () {
            $("#chart").igDataChart({
                width: "500px",
                height: "500px",
                legend: { element: "chartLegend" },
                title: "A comparison of stocks over time",
                horizontalZoomable: true,
                verticalZoomable: true,
                windowResponse: "immediate",
                axes: [{
                        name: "xAxis",
                        type: "categoryX",
                        dataSource: data,
                        label: "Date",
                        strokeThickness: 0.5,
                        stroke: axisStokeLinesBrush,
                        title: "Date",
                        tickLength: 5,
                        interval: 10
                    },
                    {   name: "pAxis",
                        type: "numericY",
                        strokeThickness: 0.5,
                       ...