For some reasons canvas is widht/height zeroed

I tried to use it in my script, and i did it in two loops. In one loop everything works, in second - canvas width/height is zeroed... I look at it few time, it is a copy of the first loop...

The only difference is that first is outside table, the second is nested table.. First i thought that place for this is too small, but I add a row for gauge... The same..... In my code canvas has height i width set the same as in first loop....

I found that one property is different: gauge.availableheight is 120 for ggauge and 0 for tgauge... But why?

<html>
<body>
<!--StartFragment-->

<script>
--
  | var opts = {
  |  
  | // color configs
  | colorStart: "#6fadcf",
  | colorStop: void 0,
  | gradientType: 0,
  | strokeColor: "#e0e0e0",
  | generateGradient: true,
  | percentColors: [[0.0, "#a9d70b" ], [0.50, "#f9c802"], [1.0, "#ff0000"]],
  |  
  | // customize pointer
  | pointer: {
  | length: 0.8,
  | strokeWidth: 0.035,
  | iconScale: 1.0
  | },
  |  
  | // static labels
  | staticLabels: {
  | font: "10px sans-serif",
  | fractionDigits: 2
  | },
  | renderTicks: {
  | divisions: 5,
  | divWidth: 1.1,
  | divLength: 0.7,
  | divColor: '#333333',
  | subDivisions: 3,
  | subLength: 0.5,
  | subWidth: 0.6,
  | subColor: '#666666'
  | },
  |  
  |  
  | // the span of the gauge arc
  | angle: 0.15,
  |  
  | // line thickness
  | lineWidth: 0.44,
  |  
  | // radius scale
  | radiusScale: 1.0,
  |  
  | // font size
  | fontSize: 40,
  |  
  | // if false, max value increases automatically if value > maxValue
  | limitMax: false,
  |  
  | // if true, the min value of the gauge will be fixed
  | limitMin: false,
  |  
  | // High resolution support
  | highDpiSupport: true
  |  
  | };
  | </script>

<!--EndFragment-->

<!--StartFragment-->

 
--
<td class="text-center"><div class="text-center">7,77%</div>
  | <canvas width=380 height=150 id="groupgauge5"></canvas>
  |  
  |  
  | <script>
  |  
  | let g5opts = JSON.parse(JSON.stringify(opts));
  | g5opts.staticLabels.labels= [0, 3.812000000000000211608508494, 15.24800000000000084643403397, 22.87199999999999915356596603, 34.30800000000000084643403397];
  | g5opts.staticZones= [
  | {strokeStyle: "#F03E3E", min: 0, max: 3.812000000000000211608508494},
  | {strokeStyle: "#FFDD00", min: 3.812000000000000211608508494, max: 15.24800000000000084643403397},
  | {strokeStyle: "#30B32D", min: 15.24800000000000084643403397, max: 22.87199999999999915356596603},
  | {strokeStyle: "#FFDD00", min: 22.87199999999999915356596603, max: 34.30800000000000084643403397},
  | {strokeStyle: "#F03E3E", min: 34.30800000000000084643403397, max: 38.1200}
  | ];
  |  
  | // render ticks
  | var gtarget5 = document.getElementById('groupgauge5');
  | var ggauge5 = new Gauge(gtarget5);
  | ggauge5.setOptions(g5opts);
  | ggauge5.maxValue = 38.1200;
  | ggauge5.setMinValue(0);
  | ggauge5.set(7.770998973617653558493646368);
  | ggauge5.animationSpeed = 32
  |  
  |  
  |  
  | </script>
  |  

<!--EndFragment-->
<!--StartFragment-->

<td colspan=5 class="text-center" width=400 height=300><div class="text-center">10,47%</div>
--
  | <canvas width="0" height="0" id="tickergauge61"></canvas>
  |  
  |  
  | <script>
  |  
  | let t61opts = JSON.parse(JSON.stringify(opts));
  | t61opts.staticLabels.labels= [0, 1.336000000000000074162898045, 5.344000000000000296651592180, 8.015999999999999703348407820, 12.02400000000000029665159218];
  | t61opts.staticZones= [
  | {strokeStyle: "#F03E3E", min: 0, max: 1.336000000000000074162898045},
  | {strokeStyle: "#FFDD00", min: 1.336000000000000074162898045, max: 5.344000000000000296651592180},
  | {strokeStyle: "#30B32D", min: 5.344000000000000296651592180, max: 8.015999999999999703348407820},
  | {strokeStyle: "#FFDD00", min: 8.015999999999999703348407820, max: 12.02400000000000029665159218},
  | {strokeStyle: "#F03E3E", min: 12.02400000000000029665159218, max: 13.3600}
  | ];
  |  
  | // render ticks
  | var ttarget61 = document.getElementById('tickergauge61');
  | var tgauge61 = new Gauge(ttarget61);
  | tgauge61.setOptions(t61opts);
  | tgauge61.maxValue = 13.3600;
  | tgauge61.setMinValue(0);
  | tgauge61.set(10.47165135556780200282856851);
  | tgauge61.animationSpeed = 32;
  |  
  |  
  |  
  | </script>
  |  
  |  
  | </td>
  |  
  | </tr>

<!--EndFragment-->
</body>
</html>

bernii / gauge.js

For some reasons canvas is widht/height zeroed #250