JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://jp.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>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/i18n/infragistics-ja.js"></script>

<div style="min-height:50px">
        <h3>Sunkost: 2013 年の売上げ目標</h3>
    </div>
    <br />
    <div>
        <div style="width:30%">
            年度売上
        </div>
        <div style="width:70%" id="bulletgraph">
        </div>
    </div>
    <br />
    <div>
        <div style="width:30%">
           利益
        </div>
        <div style="width:70%" id="bulletgraph2">
        </div>
    </div>
    <br />
    <div>
        <div style="width:30%">
            平均注文
        </div>
        <div style="width:70%" id="bulletgraph3">
        </div>
    </div>
    <br />
    <div>
        <div style="width:30%">
            新しい顧客
        </div>
        <div style="width:70%" id="bulletgraph4">
        </div>
    </div>
    <br />
    2013 年度の販売 (水平の白線) は、2012 年全体 (中範囲の開始) の販売を超えました。2013 年度の販売において、新しく導入した販売活動が成功したことを示しています。更に市場浸透が増加し、販売も向上しました。

JavaScript

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

            $bulletGraph.igBulletGraph({
                width: "100%",
                height: "80px", 
                ranges: [
                    {
                        brush:'#803E01',
                        name: 'bad',
                        startValue: 0,
                        endValue: 5000
                    },
                    {
                        brush: '#BA5A05',
                        name: 'acceptable',
                        startValue: 5000,
                        endValue: 6000
                    },
                    {
                        brush: '#FF7A04',
                        name: 'good',
                        startValue: 6000,
                        endValue: 10000
                    }
                ],
                minimumValue: 0,
                maximumValue: 10000,
                value: 6500, 
                valueInnerExtent: 0.5,
                valueOuterExtent: 0.65, 
                targetValue: 7000, 
                formatLabel: function (evt, ui) {
                    ui.label += "K";
                }
            });

            var $bulletGraph2 = $("#bulletgraph2");

            $bulletGraph2.igBulletGraph({
                width: "100%",
                height: "80px", 
                ranges: [
                    {
                        brush: '#566509',
                        name: 'bad',
                        startValue: 0,
                        endValue: 3000
                    },
                    {
                        brush: '#7F950C',
                        name: 'acceptable',
                        startValue: 3000,
                        endValue: 4000
                    },
                    {
                        brush: '#AABF31',
                        name: 'good',
                        startValue: 4000,
                        endValue: 10000
                    }
     ...