VGauge

javascript svg circular gauge widget

"zero dependencies and scales nicely on touch devices"

demo here

 

Examples	Description
	Simple gauge with a value indicator, a name, a unit and a value label.
	Gauge with a custom color value indicator, a name, a unit and a value label.
	This gauge gives the user visual feedback (at a glance) of the current state by using defined colors like: blue for 'too cold', green for 'all good', red for 'too hot'.

Back to top

 

usage

<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;

examples

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).

Back to top

 

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.

Back to top

 

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.

 

miscellaneous

cdn

you can find minified files and integrity values in the dist folder

add event handlers

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.