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-width:300px; width:70%">
        
        <div style="height: 80px">
            <h3>エネルギー源</h3>
        </div>
        <div style="height: 150px">
            <div>
                1 月<br />
                (TWh)
            </div>

            <div id="bulletgraph1">
            </div>
        </div>
        <div style="height: 150px">
            <div>
                2 月<br />
                (TWh)
            </div>
            <div id="bulletgraph2">
            </div>
        </div>
        <div style="height: 150px">
            <div>
                3 月<br />
                (TWh)
            </div>        
            <div id="bulletgraph3">
            </div>
        </div>
    </div>
      <br />
    暖冬により、米国における家庭暖房の天然ガスの需要を縮小しています。さらに、プラスティックや石油化学産業における天然ガスの需要も減ってきています。今年の夏は猛暑になると予測されてはいるものの、平年、5 月は全国的に涼しいために需要が高くなることが予想されていました。しかしながら、需要は低迷しています。

JavaScript

$(function () {
            var $bulletGraph1 = $("#bulletgraph1");

            $bulletGraph1.igBulletGraph({
                height: '80px',
                width: '100%',
                // The interval to use for the ticks. Default value is calculated, rather than predefined, to show 11 ticks based on the minimum and maximum values (in this case value would equal to 75)
                //interval: 75,
                // Gets or sets the position at which to start rendering the major tickmarks as a value from 0 to 1, measured from the front/bottom of the gauge.
                // Values further from zero than 1 can be used to make this extend further than the normal size of the gauge.
                tickStartExtent: 0.02,
                // Gets or sets the position at which to stop rendering the major tickmarks as a value from 0 to 1, measured from the front/bottom of the gauge.
                // Values further from zero than 1 can be used to make this extend further than the normal size of the gauge.
                tickEndExtent: 0.2,
                // A value to start adding tickmarks, added to the scale's MinimumValue.
                ticksPostInitial: 0,
                // A value to stop adding tickmarks, subtracted from the scale's MaximumValue.
                ticksPreTerminal: 0,
                // Gets or sets the stroke thickness to use when rendering ticks.
                tickStrokeThickness: 2,
                // Gets or sets the brush to use for the major tickmarks.
                tickBrush: 'black',
                // Gets or sets the number of minor tickmarks to place between major tickmarks.
                minorTickCount: 3,
                // Gets or sets the position at which to start rendering the minor tickmarks as a value from 0 to 1, measured from the front/bottom of the gauge.
                // Values further from zero than 1 can be used to make this extend further than the normal size of the gauge.
               ...