vue-svg-gauge
An easily customizable gauge for VueJS with gradients and animations
Demo
You can find a demo here
Installation
npm i vue-svg-gauge --save
yarn add -D vue-svg-gauge
Import
ES6
The following examples can also be used with CommonJS by replacing ES6-specific syntax with CommonJS equivalents.
components: VueSvgGauge
Globals as a pluggin
Vue
Globals (via the script tag)
Add a script tag pointing to dist/vue-svg-gauge.min.js after adding Vue.
...
Usage
Once installed, it can be user in any template as
<!-- or -->
Props
Props | Type | Value | Default |
---|---|---|---|
value | Number | Value of the gauge, must be contained between min and max. If not, it will be set to min if inferior, or max if superior | 70 |
min | Number | Minimum value reachable | 0 |
max | Number | Maximum value reachable | 100 |
startAngle | Number | Start angle of the gauge. Can go from -360° to 360° but must be smaller than endAngle | -90 |
endAngle | Number | End angle of the gauge. Can go from -360° to 360° but must be greater than startAngle | 90 |
innerRadius | Number | inner radius that will determine the thickness of the gauge | 60 |
separatorStep | Number | Number of steps between each separator (will display a separator each min + (n * separatorStep)). Won't display any if 0 or null | 10 |
separatorThickness | Number | Thickness of the separators, unit is in degree | 4 |
gaugeColor | String,Array | Color of the gauge, can either be a simple color or a gradient | [{ offset: 0, color: '#347AB0' }, { offset: 100, color: '#8CDFAD' }] |
baseColor | String | Color of the empty gauge | #DDDDDD |
scaleInterval | Number | Interval between the scale line, based on min and max. Won't display any if 0 or null | 5 |
transitionDuration | Number | Transition duration time in ms. If set to 0 , there will be no transition |
1500 |
easing | String | Animation easing option | Circular.Out |
Notes :
- the reference angle is 0 on top of the gauge.
- you can find the documentation about the different animation functions here
Slot
There is a main slot allowing you to display any kind of html you want in your gauge.
Example
Let's make this fun !
}
Dependencies
You will need to install vue ~2.5.22
to use this package properly
Also vue-svg-gauge relies on the tweenJs library for animations.
Made with ❤️ at comet