vgauge

vgauge

A Vue Wrapper to GaugeJS

Play

Live Demo

Installing

npm i vgauge --save

Usage

import VGauge from 'vgauge'

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

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

Props

You can use the following props

Name	Description	Type	Default
options	GaugeJS render options, check gaugejs API	Object	Basic gaugejs Object
height	height of the gauge	string	200px
unit	unit to show after value	string	''
initialValue	Initial value to display on the Gauge	Number	0
value	Value to display/watch	Number	50
minValue	Min value for the gauge to display	Number	0
maxValue	Max value for the gauge to display	Number	100
decimalPlace	Show decimal place values to which extent	Number	0
top	To have the gauge value on top of the gauge	Boolean	false
gaugeValueClass	Class to apply to gauge value (Must use /deep/ in css selector)	String	*
animationSpeed	Animation speed for gauge	Number	10

Authors

• Amr Essam - Github

License

This project is licensed under the MIT License

Acknowledgments

• Vue
• GaugeJS