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>
<link href="https://jp.igniteui.com/css/apiviewer.css" rel="stylesheet" type="text/css"></link>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/i18n/infragistics-ja.js"></script>

<div style="min-height:50px">
        <h3>健康的な食事</h3>
    </div>
    <br />
    <div>
        <div style="width:30%">
            脂質
        </div>
        <div style="width:70%" id="lineargauge1">
        </div>
    </div>
    <br />
    <div>
        <div style="width:30%">
           炭水化物
        </div>
        <div style="width:70%" id="lineargauge2">
        </div>
    </div>
    <br /> 
    <div>
        <div style="width:30%">
            たんぱく質
        </div>
        <div style="width:70%" id="lineargauge3">
        </div>
    </div>
    <br />
    脂質、炭水化物、たんぱく質の合計カロリーの比率。中の範囲は健康的な食事の比率です。目標値が設定されています。

JavaScript

$(function () {
            var $linearGauge = $("#lineargauge1");

            $linearGauge.igLinearGauge({
                width: '100%',
                height: '80px', 
                ranges: [
                    {
                        brush: '#FDB881',
                        name: 'bad',
                        startValue: 0,
                        endValue: 20
                    },
                    {
                        brush: '#F18B36',
                        name: 'acceptable',
                        startValue: 20,
                        endValue: 35
                    },
                    {
                        brush: '#D2660D',
                        name: 'good',
                        startValue: 35,
                        endValue: 100
                    }
                ], 
                value: 40, 
                needleStrokeThickness: 2,
                formatLabel: function (evt, ui) {
                    ui.label += "%";
                }
            });

            var $linearGauge2 = $("#lineargauge2");

            $linearGauge2.igLinearGauge({
                width: '100%',
                height: '80px', 
                ranges: [
                    {
                        brush: '#ABD652',
                        name: 'bad',
                        startValue: 0,
                        endValue: 45
                    },
                    {
                        brush: '#739F19',
                        name: 'acceptable',
                        startValue: 45,
                        endValue: 65
                    },
                    {
                        brush: '#527211',
                        name: 'good',
                        startValue: 65,
                        endValue: 100
                    }
                ], 
                value: 35,
                labelExtent: 0.76,
                tickStartExtent: 0.5,
                minorTickEndExtent: 0.54,
               ...