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>

<div style="width:100%; height:300px">
        <div id="lineargauge"></div>
    </div>
     
    

    <fieldset id="graphOptions" style="margin-top: 30px; font-size:14px">
        <legend>Options</legend>
        <table style="font-size:14px">
            <tr>
                <td>Orientation</td>
                <td>
                    <button id="orientationButton" style="width: 100px; margin: 12px 40px 12px 12px">Horizontal</button>
                </td>
                <td style="font-size:14px"> 
                    Is Scale Inverted
                </td>
                <td>
                    <input type="checkbox" id="isScaleInvertedCheckBox" style="width: 100px; margin: 12px"></input>
                </td>
            </tr>
        </table>
    </fieldset>

JavaScript

$(function () {

            var linearGauge = $("#lineargauge");

            linearGauge.igLinearGauge({
                height: "300px",
                width: "60px",
                orientation: "vertical", 
                value: 85, 
                ranges: [
                    {
                        name: 'bad',
                        startValue: 0,
                        endValue: 33
                    },
                    {
                        name: 'acceptable',
                        startValue: 33,
                        endValue: 70
                    },
                    {
                        name: 'good',
                        startValue: 70,
                        endValue: 100
                    }],
                transitionDuration: 200,
            });

            // Orientation
            $("#orientationButton").click(function () {
                

                var orientation = linearGauge.igLinearGauge("option", "orientation") == "vertical" ? "horizontal" : "vertical";
                linearGauge.igLinearGauge("option", "orientation", orientation);

                if (orientation == "horizontal") {
                    linearGauge.igLinearGauge("option", "width", "100%");
                    linearGauge.igLinearGauge("option", "height", 60);
                }
                else {
                    linearGauge.igLinearGauge("option", "width", 60);
                    linearGauge.igLinearGauge("option", "height", 300);
                }

                $("#orientationButton").text(orientation == "horizontal" ? "Vertical" : "Horizontal");
            });

            // Scale Inversion
            $("#isScaleInvertedCheckBox").click(function () {
                linearGauge.igLinearGauge("option", "isScaleInverted", $(this).is(":checked"));
            });
        });