1.0.3 • Published 4 years ago
vue-gauge v1.0.3
VueJS Gauge Chart
A vuejs gauge charts wrap-over for the library gauge-chart .
Demo
Installation
npm install vue-gaugeExample
<template>
<vue-gauge :refid="'type-unique-id'"></vue-gauge>
</template>
<script>
import VueGauge from 'vue-gauge';
export default {
components: { VueGauge },
}
</script>
Or to load as global component
<script>
import VueGauge from 'vue-gauge';
Vue.component('vue-gauge', VueGauge);
</script>By default, the needle is pointing to 70, thus in order to move it you have to use like below
<template>
<vue-gauge :refid="'type-unique-id'" :options="{'needleValue':85,'arcDelimiters':[85]}"></vue-gauge>
</template>You can also change others gauge options value like:
<template>
<vue-gauge :refid="'type-unique-id'" :options="{'needleValue':85,'arcDelimiters':[10,36,78], 'hasNeedle':false]}"></vue-gauge>
</template>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:
