I am utilizing guage.js to create a graph based on this Fiddle. However, upon adding the same code to my website, the rendering does not appear as expected:
https://i.sstatic.net/fIkQr.png
Upon inspecting in Chrome developer tools, I noticed that the element still exists but lacks height and width:
https://i.sstatic.net/JEzWy.png
What seems odd is that although I have set the width and height for both the parent div and canvas itself, the CSS properties of guage.js override them with no width and height. Additionally, there are no relevant errors displayed in the Chrome dev tools console, indicating that guage.js is functional but failing to render. Below you can find the code snippet used:
<div style="margin: auto; width: 200px; height: 160px;">
<canvas id="foo" width="200" height="160"></canvas>
</div>
$(document).ready(function () {
var opts = {
angle: -0.10,
lineWidth: 0.2,
pointer: {
length: 0.9,
strokeWidth: 0.035
},
colorStart: '#6FADCF',
colorStop: '#8FC0DA',
strokeColor: '#E0E0E0',
staticZones: [{
strokeStyle: "#F03E3E",
min: -3,
max: -2.5
},
{
strokeStyle: "#FFDD00",
min: -2.5,
max: -2
},
{
strokeStyle: "#30B32D",
min: -2,
max: 2
},
{
strokeStyle: "#FFDD00",
min: 2,
max: 2.5
},
{
strokeStyle: "#F03E3E",
min: 2.5,
max: 3
}
],
staticLabels: {
font: "10px sans-serif",
labels: [2, 2.5, 3, 0, -2, -2.5, -3],
color: "#000000",
fractionDigits: 1
}
};
var target = document.getElementById('foo');
var gauge = new Gauge(target).setOptions(opts);
gauge.maxValue = 3;
gauge.setMinValue(-3);
gauge.set(1.22);
});
Your assistance would be greatly appreciated. Thank you!