- Notifications
You must be signed in to change notification settings - Fork9
A wrapper library for GaugeJS
License
NotificationsYou must be signed in to change notification settings
amroessam/vgauge
Folders and files
Name | Name | Last commit message | Last commit date | |
---|---|---|---|---|
Repository files navigation
A Vue Wrapper toGaugeJS
npm i vgauge --save
or
<scriptsrc="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><scriptsrc="https://cdn.jsdelivr.net/npm/vgauge@latest"></script>
importVGaugefrom'vgauge';exportdefault{components:{ VGauge},data(){return{value:35};}};
<v-gauge:value="value"/>
<divid="app"><h3>Will not stop at 100</h3><v-gauge:value="x"top></v-gauge><h3>Will stop at 100</h3><v-gauge:value="y"unit="%"></v-gauge></div><script>varapp=newVue({el:'#app',data:{x:0,y:0},mounted(){setInterval(()=>{this.x+=4;},1000);setInterval(()=>{if(this.y<100)this.y+=5;},1000);}});</script>
You can use the following props
Name | Description | Type | Default |
---|---|---|---|
options | GaugeJS render options, check gaugejsAPI | Object | Basic gaugejs Object |
donut | Renders a donut instead of a gauge#3 | Boolean | false |
height | height of the gauge in pixels | String | 200px |
width | width of the gauge in pixels | 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 |
- Amr Essam -Github
This project is licensed under the MIT License
About
A wrapper library for GaugeJS
Topics
Resources
License
Stars
Watchers
Forks
Packages0
No packages published