Svg Gauge Versions Save

Minimalistic, animated SVG gauge. Zero dependencies

1.0.5

5 years ago

Added support for viewBox Fixed documentation typos Upgraded build to gulp 4

1.0.4

6 years ago

Fixed minor bugs

  • Value dial colour now shows for initial value
  • Positive min and max values now work correctly (e.g. min: 50, max: 150)
var gauge = Gauge( document.getElementById("gauge2"),  {
    min: 50, // +ve min value
    max: 150,
    dialStartAngle: 180,
    dialEndAngle: 0,
    value: 50, // The color is correctly shown now
    color: function(value) {
      if(value < 20) {
        return "#5ee432";
      }else if(value < 40) {
        return "#fffa50";
      }else if(value < 60) {
        return "#f7aa38";
      }else {
        return "#ef4655";
      }
    }
  }
);

1.0.3

6 years ago

Fixed minor bugs

  • Value dial colour now shows for initial value
  • Positive min and max values now work correctly (e.g. min: 50, max: 150)

1.0.2

7 years ago

Added options to specify CSS classes for gauge dial, gauge dial fill and text

1.0.1

7 years ago

Bug fix release and some optimizations

1.0.0

7 years ago

Added custom label support


      var gauge1 = Gauge(
        document.getElementById("gauge1"), 
            {
          max: 100,
          dialStartAngle: -90,
          dialEndAngle: -90.001, 
          value: 100,
          label: function(value) {
            return Math.round(value) + "/" + this.max;
          }
        }
      );