VueJS Gauge Chart
A vuejs gauge charts wrap-over for the library gauge-chart .
Demo
Installation
```bash npm install vue-gauge ```Example
```vue Or to load as global component ``` By default, the needle is pointing to 70, thus in order to move it you have to use like below ```vue 85}"> ``` You can also change others gauge options value like: ```vue 10,36,78, 'hasNeedle':false}"> ```Options
| Name | Values Ranges | Description | | ----------------- | -------------------------------------------------------------------------------- | ------------------------------------------------------------------- | | hasNeedle | true / false | determines whether to show the needle or not | | needleColor | value supported by CSS | colorizes needle with specified colors | | needleUpdateSpeed | number ⩾ 0 | determines the speed of needle update animation | | arcColors | array of values supported by CSS | colorizes gauge with specified color | | arcDelimiters | array of numbers from 0 to 100 | specifies delimiters of the gauge in ascending order | | arcOverEffect | true / false | determines if over effect on ars is enabled or not | | arcLabels | array of strings | specifies labels to be placed at delimiters ends | | arcPadding | number | specifies padding between arcs (in pixels) | | arcPaddingColor | value supported by CSS | color of the padding between delimeters | | rangeLabel | array of two strings | depicts gauge ranges on both sides of the chart | | centralLabel | string | depicts gauge inner label | | labelsFont | string | specifies font-family to be used for labels | | chartWidth | number larger than 0 | gives a width to the gauge (height is always 0.5 \* chartWidth) | | needleValue | number from 0 to 100 | specifies needle value on the gauge |Examples
Some examples of what you can get out of the library using different properties:
