A vuejs gauge charts wrap-over for the library gauge-chart .
npm install vue-gauge
<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>
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 |
Some examples of what you can get out of the library using different properties: