Create Animated Gauges With JavaScript – SVG Gauge

Preview:

Description:

SVG Gauge is a dependency-free JavaScript library for drawing customizable, animated gauges using JavaScript and SVG.

How to use it:

Load the minified version of the SVG Gauge library in the html file.

<script src="dist/gauge.min.js"></script>

Create a container to hold the gauge.

<div id="gauge-demo" class="gauge-container"></div>

The JavaScript to render a basic gauge in the container you created.

var myGauge = Gauge(document.getElementById("gauge-demo"));

The example CSS to customize the gauge, dial, value, text, etc.

.gauge-container > .gauge > .dial {
  stroke: #334455;
  stroke-width: 2;
}
.gauge-container > .gauge > .value {
  stroke: rgb(47, 227, 255);
  stroke-width: 2;
}
.gauge-container > .gauge > .value-text {
  fill: rgb(47, 227, 255);
  font-family: sans, 'sans-serif';
  font-weight: bold;
  font-size: 0.6em;
}

Default configuration options.

var myGauge = Gauge(document.getElementById("gauge-demo"),{
    dialRadius: 40,
    dialStartAngle: 135,
    dialEndAngle: 45,
    value: 0,
    max: 100,
    min: 0,
    valueDialClass: "value",
    valueClass: "value-text",
    dialClass: "dial",
    gaugeClass: "gauge",
    showValue: true,
    gaugeColor: null,
    label: function(val) {return Math.round(val);} // returns a string label that will be rendered in the center
});