Create Cool Gauges In Vue – vgauge

vgauge is a Vue.js wrapper for gauge.js that makes it easier to generate cool gauges in Vue.js powered web apps.

How to use it:

1. Install and import the vgauge component.

import VGauge from 'vgauge';

2. Register the gauge component.

export default {
  components: {
    VGauge
  },
  data() {
    return {
      value: 35
    };
  }
};

3. Insert a gauge component into your app template.

<v-gauge :value="100" />

4. All possible props to config the gauge.

unit: {
  type: String,
  default: ""
},
height: {
  type: String,
  default: "200px"
},
width: {
  type: String,
  default: "200px"
},
decimalPlace: {
  type: Number,
  default: 0
},
gaugeValueClass: {
  type: String,
  default: ""
},
top: {
  type: Boolean,
  default: false
},
maxValue: {
  type: Number,
  default: 100
},
minValue: {
  type: Number,
  default: 0
},
options: {
  type: Object,
  default: function() {
    return {
      angle: 0.15,
      lineWidth: 0.44,
      radiusScale: 1,
      pointer: {
        length: 0.6,
        strokeWidth: 0.035,
        color: "#000000"
      },
      limitMax: false,
      limitMin: false,
      colorStart: "#6FADCF",
      colorStop: "#8FC0DA",
      strokeColor: "#E0E0E0",
      generateGradient: true,
      highDpiSupport: true
    };
  }
},
animationSpeed: {
  type: Number,
  default: 10
},
initialValue: {
  type: Number,
  default: 0
},
value: {
  type: Number,
  default: 50
},
donut: {
  type: Boolean,
  default: false
}

Preview:

Changelog:

v1.2.1 (08/19/2020)

• fix memory leak

Download Details:

Author: amroessam

Live Demo: https://jz3qoxny63.codesandbox.io/

Download Link: https://github.com/amroessam/vgauge/archive/master.zip

Official Website: https://github.com/amroessam/vgauge

Install & Download:

# NPM
$ npm install vgauge --save