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="bulletgraph"></div>
    </div>  

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

JavaScript

$(function () {

            var $bulletGraph = $("#bulletgraph");

            $bulletGraph.igBulletGraph({
                height: "300px",
                width: "60px",
                orientation: "vertical", 
                value: 85,
                targetValue: 77,
                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 = $bulletGraph.igBulletGraph("option", "orientation") == "vertical" ? "horizontal" : "vertical";
                $bulletGraph.igBulletGraph("option", "orientation", orientation);

                if (orientation == "horizontal") {
                    $bulletGraph.igBulletGraph("option", "width", "100%");
                    $bulletGraph.igBulletGraph("option", "height", 60);
                }
                else {
                    $bulletGraph.igBulletGraph("option", "width", 60);
                    $bulletGraph.igBulletGraph("option", "height", 300);
                }
                
                $("#orientationButton").text(orientation == "horizontal" ? "Vertical" : "Horizontal");
            });

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