javascript svg circular gauge widget
"zero dependencies and scales nicely on touch devices"
<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-50 -50 100 100">
<g id="groupId"></g>
</svg>
</div>
<script src="pathTo/vgauge.js"></script>
const gauge = new VGauge('groupId', settings);
gauge.value = 34.6;
Simple gauge with a value indicator, a name, a unit and a value label.
settings JSON
{
"min": -20,
"max": 50,
"startAngle": 90,
"sweepAngle": 260,
"fontFamily": "",
"backgroundColor": "",
"indicator": {
"innerRadius": 32,
"outerRadius": 40
},
"name": {
"text": "Room 1",
"x": 0,
"y": -10,
"fill": "",
"fontSize": "7px"
},
"unit": {
"text": "°C",
"x": 2,
"y": 39,
"fill": "",
"fontSize": "11px"
},
"value": {
"x": 40,
"y": 20,
"fill": "",
"fontSize": "1rem",
"decimals": 1
}
}
Note
The fill color used for all elements of the gauge is the color style of the container (currentColor).
Gauge with a custom color value indicator, a name, a unit and a value label.
settings JSON
{
"min": -20,
"max": 50,
"startAngle": 90,
"sweepAngle": 260,
"useHelperGrid": true,
"fontFamily": "",
"backgroundColor": "",
"cluster": {
"innerRadius": 30,
"outerRadius": 40,
"useTickLabels": false,
"sectors": [
{
"fill": "#ffc107",
"opacity": 0.02,
"sweepTo": 50,
"useAsValueColor": false,
"useAsIndicatorColor": true
}
]
},
"value": {
"x": 40,
"y": 20,
"fill": "",
"fontSize": "1rem",
"decimals": 1
},
"indicator": {
"fill": "",
"innerRadius": 32,
"outerRadius": 40
},
"name": {
"text": "Room 1",
"x": 0,
"y": -10,
"fill": "",
"fontSize": "7px"
},
"unit": {
"text": "°C",
"x": 2,
"y": 39,
"fill": "",
"fontSize": "11px"
}
}
Note
The fill color used for labels is the color style of the container (currentColor) and the fill color used for the indicator is the color set for the underlying sector. The underlying sector's opacity can be adjusted to give the user a visual hint of the max range. Set the opacity to 0 if you want to hide the underlying sector completely.
This gauge gives the user quick visual feedback by using colors like: blue for 'too cold', green for 'all good', red for 'too hot'.
settings JSON
{
"min": -20,
"max": 50,
"startAngle": 90,
"sweepAngle": 260,
"fontFamily": "",
"backgroundColor": "",
"cluster": {
"innerRadius": 30,
"outerRadius": 40,
"useTickLabels": true,
"sectors": [
{
"fill": "#ffc107",
"opacity": 0.1,
"sweepTo": -5,
"useAsValueColor": false,
"useAsIndicatorColor": true
},
{
"fill": "#0d6efd",
"opacity": 0.1,
"sweepTo": 15,
"useAsValueColor": false,
"useAsIndicatorColor": true
},
{
"fill": "#198754",
"opacity": 0.1,
"sweepTo": 30,
"useAsValueColor": false,
"useAsIndicatorColor": true
},
{
"fill": "#dc3545",
"opacity": 0.1,
"sweepTo": 50,
"useAsValueColor": true,
"useAsIndicatorColor": true
}
]
},
"value": {
"x": 40,
"y": 20,
"fill": "",
"fontSize": "1rem",
"decimals": 1
},
"indicator": {
"fill": "",
"innerRadius": 32,
"outerRadius": 40
},
"name": {
"text": "Room 1",
"x": 0,
"y": -10,
"fill": "",
"fontSize": "7px"
},
"unit": {
"text": "°C",
"x": 2,
"y": 39,
"fill": "",
"fontSize": "11px"
},
"ticks": {
"radius": 44,
"fontSize": "8px",
"fill": "#7f7f7f",
"opacity": 0.1
}
}
Note
The fill color used for labels is the color style of the container (currentColor) and the fill color used for the indicator is the color of the underlying sector that the current value corresponds to. The underlying sectors opacity can each be adjusted to give the user a visual hint of the max range. Set the opacity to 0 if you want to hide the underlying sector completely.
you can find minified files and integrity values in the dist folder
to make the gauge container focusable/selectable add tabindex="0" to the container div for bootstrap add form-control, mb-2 and mt-2 to class attribute.
Tip
when using the demo, you can use ctrl-s inside the JSON editor to recreate.