<div class="g-wrapper g-wrapper-label-0">

<div id="{{'gauge_'+$id}}" class="g-container" style="--gauge-value:100; --container-size:4; --gn-distance:28; --ga-tick-count:10; --ga-subtick-count:100; --g-unit:'pH'">
    <div id="bgr" class="g-body quarter-top-right">
        <div class="g-ring">
            <div class="g-plate">
                <div class="g-zone high"></div>
                <div class="g-zone warn"></div>
                <div class="g-zone normal"></div>
                <div class="g-zone low"></div>
                <div class="g-ticks">
                    <div class="g-tick" style="--ga-tick:1;"></div>
                    <div class="g-tick" style="--ga-tick:2;"></div>
                    <div class="g-tick" style="--ga-tick:3;"></div>
                    <div class="g-tick" style="--ga-tick:4;"></div>
                    <div class="g-tick" style="--ga-tick:5;"></div>
                    <div class="g-tick" style="--ga-tick:6;"></div>
                    <div class="g-tick" style="--ga-tick:7;"></div>
                    <div class="g-tick" style="--ga-tick:8;"></div>
                    <div class="g-tick" style="--ga-tick:9;"></div>
                    <div class="g-tick" style="--ga-tick:10;"></div>
                    <div class="g-tick" style="--ga-tick:11;"></div>
                </div>
                <div class="g-ticks">
                    <div class="g-subtick" style="--ga-tick:2;"></div>
                    <div class="g-subtick" style="--ga-tick:3;"></div>
                    <div class="g-subtick" style="--ga-tick:4;"></div>
                    <div class="g-subtick" style="--ga-tick:5;"></div>
                    <div class="g-subtick" style="--ga-tick:6;"></div>
                    <div class="g-subtick" style="--ga-tick:7;"></div>
                    <div class="g-subtick" style="--ga-tick:8;"></div>
                    <div class="g-subtick" style="--ga-tick:9;"></div>
                    <div class="g-subtick" style="--ga-tick:10;"></div>
                    
                    <div class="g-subtick" style="--ga-tick:12;"></div>
                    <div class="g-subtick" style="--ga-tick:13;"></div>
                    <div class="g-subtick" style="--ga-tick:14;"></div>
                    <div class="g-subtick" style="--ga-tick:15;"></div>
                    <div class="g-subtick" style="--ga-tick:16;"></div>
                    <div class="g-subtick" style="--ga-tick:17;"></div>
                    <div class="g-subtick" style="--ga-tick:18;"></div>
                    <div class="g-subtick" style="--ga-tick:19;"></div>
                    <div class="g-subtick" style="--ga-tick:20;"></div>
                    
                    <div class="g-subtick" style="--ga-tick:22;"></div>
                    <div class="g-subtick" style="--ga-tick:23;"></div>
                    <div class="g-subtick" style="--ga-tick:24;"></div>
                    <div class="g-subtick" style="--ga-tick:25;"></div>
                    <div class="g-subtick" style="--ga-tick:26;"></div>
                    <div class="g-subtick" style="--ga-tick:27;"></div>
                    <div class="g-subtick" style="--ga-tick:28;"></div>
                    <div class="g-subtick" style="--ga-tick:29;"></div>
                    <div class="g-subtick" style="--ga-tick:30;"></div>
                    
                    <div class="g-subtick" style="--ga-tick:32;"></div>
                    <div class="g-subtick" style="--ga-tick:33;"></div>
                    <div class="g-subtick" style="--ga-tick:34;"></div>
                    <div class="g-subtick" style="--ga-tick:35;"></div>
                    <div class="g-subtick" style="--ga-tick:36;"></div>
                    <div class="g-subtick" style="--ga-tick:37;"></div>
                    <div class="g-subtick" style="--ga-tick:38;"></div>
                    <div class="g-subtick" style="--ga-tick:39;"></div>
                    <div class="g-subtick" style="--ga-tick:40;"></div>
                    
                    <div class="g-subtick" style="--ga-tick:42;"></div>
                    <div class="g-subtick" style="--ga-tick:43;"></div>
                    <div class="g-subtick" style="--ga-tick:44;"></div>
                    <div class="g-subtick" style="--ga-tick:45;"></div>
                    <div class="g-subtick" style="--ga-tick:46;"></div>
                    <div class="g-subtick" style="--ga-tick:47;"></div>
                    <div class="g-subtick" style="--ga-tick:48;"></div>
                    <div class="g-subtick" style="--ga-tick:49;"></div>
                    <div class="g-subtick" style="--ga-tick:50;"></div>
                    
                    <div class="g-subtick" style="--ga-tick:52;"></div>
                    <div class="g-subtick" style="--ga-tick:53;"></div>
                    <div class="g-subtick" style="--ga-tick:54;"></div>
                    <div class="g-subtick" style="--ga-tick:55;"></div>
                    <div class="g-subtick" style="--ga-tick:56;"></div>
                    <div class="g-subtick" style="--ga-tick:57;"></div>
                    <div class="g-subtick" style="--ga-tick:58;"></div>
                    <div class="g-subtick" style="--ga-tick:59;"></div>
                    <div class="g-subtick" style="--ga-tick:60;"></div>
                    
                    <div class="g-subtick" style="--ga-tick:62;"></div>
                    <div class="g-subtick" style="--ga-tick:63;"></div>
                    <div class="g-subtick" style="--ga-tick:64;"></div>
                    <div class="g-subtick" style="--ga-tick:65;"></div>
                    <div class="g-subtick" style="--ga-tick:66;"></div>
                    <div class="g-subtick" style="--ga-tick:67;"></div>
                    <div class="g-subtick" style="--ga-tick:68;"></div>
                    <div class="g-subtick" style="--ga-tick:69;"></div>
                    <div class="g-subtick" style="--ga-tick:70;"></div>
                    
                    <div class="g-subtick" style="--ga-tick:72;"></div>
                    <div class="g-subtick" style="--ga-tick:73;"></div>
                    <div class="g-subtick" style="--ga-tick:74;"></div>
                    <div class="g-subtick" style="--ga-tick:75;"></div>
                    <div class="g-subtick" style="--ga-tick:76;"></div>
                    <div class="g-subtick" style="--ga-tick:77;"></div>
                    <div class="g-subtick" style="--ga-tick:78;"></div>
                    <div class="g-subtick" style="--ga-tick:79;"></div>
                    <div class="g-subtick" style="--ga-tick:80;"></div>
                    
                    <div class="g-subtick" style="--ga-tick:82;"></div>
                    <div class="g-subtick" style="--ga-tick:83;"></div>
                    <div class="g-subtick" style="--ga-tick:84;"></div>
                    <div class="g-subtick" style="--ga-tick:85;"></div>
                    <div class="g-subtick" style="--ga-tick:86;"></div>
                    <div class="g-subtick" style="--ga-tick:87;"></div>
                    <div class="g-subtick" style="--ga-tick:88;"></div>
                    <div class="g-subtick" style="--ga-tick:89;"></div>
                    <div class="g-subtick" style="--ga-tick:90;"></div>
                    
                    <div class="g-subtick" style="--ga-tick:92;"></div>
                    <div class="g-subtick" style="--ga-tick:93;"></div>
                    <div class="g-subtick" style="--ga-tick:94;"></div>
                    <div class="g-subtick" style="--ga-tick:95;"></div>
                    <div class="g-subtick" style="--ga-tick:96;"></div>
                    <div class="g-subtick" style="--ga-tick:97;"></div>
                    <div class="g-subtick" style="--ga-tick:98;"></div>
                    <div class="g-subtick" style="--ga-tick:99;"></div>
                    <div class="g-subtick" style="--ga-tick:100;"></div>
                </div>
               <div class="g-nums">
                    <div class="g-num" style="--ga-tick:1;" >100</div>

                    <div class="g-num" style="--ga-tick:3;">80</div>

                    <div class="g-num" style="--ga-tick:5;">60</div>

                    <div class="g-num" style="--ga-tick:7;">40</div>

                    <div class="g-num" style="--ga-tick:9;">20</div>

                    <div class="g-num" style="--ga-tick:11;">0</div>
                </div>
                <div class="g-label"></div>
                <div class="g-needle"></div>
                <div class="g-needle-ring"></div>
            </div>
            <div class="g-val-ring">
                <div class="g-val-plate"></div>
                <div id="{{'gauge_val_'+$id}}" class="g-val"></div>
            </div>
        </div>
    </div>
</div>
</div>
<script>
(function(scope) {
    let min = 0;
    let max = 100;
  scope.$watch('msg', function(msg) {
    if (msg) {
      // Do something when msg arrives
        const val = msg.payload
        const v = max - (((val - min) / (max - min)) * 100);
        document.getElementById('gauge_'+scope.$id).style.setProperty('--gauge-value', v);
        document.getElementById('gauge_val_'+scope.$id).innerText = val.toFixed(1);
    }
   
  });
})(scope);
</script>



change this value to 0-14