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.lob.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.dv.js"></script>
<script src="https://igniteui.com/js-data/financial-indicators"></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>

<div class="selectionOptions">
        Series type:
        <select id="seriesType" class="selectBounds">
            <option value="candlestick" selected="selected">Candlestick</option>
            <option value="ohlc">OHLC</option>
            <option value="absoluteVolumeOscillatorIndicator">Absolute Volume Oscillator</option>
            <option value="averageTrueRangeIndicator">Average True Range</option>
            <option value="accumulationDistributionIndicator">Accumulation Distribution</option>
            <option value="averageDirectionalIndexIndicator">Average Directional Index</option>
            <option value="bollingerBandsOverlay">Bollinger Bands Overlay</option>
            <option value="bollingerBandWidthIndicator">Bollinger Band Width</option>
            <option value="chaikinOscillatorIndicator">Chaikin Oscillator</option>
            <option value="chaikinVolatilityIndicator">Chaikin Volatility</option>
            <option...

CSS

.selectionOptions
        {
            width: 450px;
            margin-top: 10px;
        }

        .selectionOptions > label 
        {
            display: block;
        }

        .optionContainer {
            min-width: 120px;
            max-width: 250px;
            margin: 2px;
            padding: 2px;
            display: inline-block;
            border: 1px solid #e0e0e0;
            -moz-border-radius: 4px;
            -webkit-border-radius: 4px;
            border-radius: 4px;
        }

         td { vertical-align: top; }
        .chartElement {
            padding-bottom: 20px;
        }

        .sliderBounds {
            width: 95px;
            margin: 6px 3px 6px 6px;
            display: inline-block;
        }
        
        .selectBounds {
            min-width: 120px;
            max-width: 132px;
        }

JavaScript

$(function () {
           $("#chart").igDataChart({
                width: "100%",
                height: "400px",
                dataSource: data,
                title: "Financial Chart",
                horizontalZoomable: true,
                verticalZoomable: true,
                axes: [{
                    type: "categoryX",
                    label: "Date",
                    name: "xAxis",
                    title: "Date"
                }, {
                    type: "numericY",
                    name: "yAxis",
                    title: "Price"
                }],
                series: [{
                    type: "financial",
                    displayType: "candlestick",
                    closeMemberPath: "Close",
                    highMemberPath: "High",
                    lowMemberPath: "Low",
                    openMemberPath: "Open",
                    volumeMemberPath: "Volume",
                    xAxis: "xAxis",
                    yAxis: "yAxis",
                    name: "indicatorSeries",
                    title: "Financial Indicator Data",
                    isHighlightingEnabled: true,
                    isTransitionInEnabled: true,

                }]
            });
        

           $("#seriesType").change(function (e) {
               var seriesType = $("#seriesType").val();
               var thickness = 3;
               if (seriesType == "candlestick" ||
                      seriesType == "priceChannelOverlay" ||
                      seriesType == "bollingerBandsOverlay") {
                   thickness = 1;
               }
               if (seriesType == "ohlc") {
                   thickness = 2;
               }
               
                $("#chart").igDataChart("option", "series", [{name: "indicatorSeries",remove: true}]);
               
                if (seriesType == "ohlc" || seriesType == "candlestick") {
                    $("#chart").igDataChart("option", "series", [{
               ...