VueJS Gauge Chart

A vuejs gauge charts wrap-over for the library gauge-chart .

Demo

Installation

npm install vue-gauge

Example

<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: