Vue UI Components Documentation

Determines the animation in milliseconds. To disable this property - set it to 0 (zero).

<template>
  <JqxBarGauge ref="myBarGauge"
    :width="600" :height="600" :max="150" :values=" [102, 115, 130, 137] "
    :animationDuration="500"
  />
</template>
 
<script>
  import JqxBarGauge from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbargauge.vue';
 
  export default {
    components: {
      JqxBarGauge
    }
  }
</script>

Get the animationDuration property.

let animationDuration = this.$refs.myBarGauge.animationDuration;

Sets or gets the jqxBarGauge background color.

<template>
  <JqxBarGauge ref="myBarGauge"
    :width="600" :height="600" :max="150" :values=" [102, 115, 130, 137] "
    :backgroundColor="'red'"
  />
</template>
 
<script>
  import JqxBarGauge from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbargauge.vue';
 
  export default {
    components: {
      JqxBarGauge
    }
  }
</script>

Get the backgroundColor property.

let backgroundColor = this.$refs.myBarGauge.backgroundColor;

Sets or gets the space between the segments of the jqxBarGauge.

<template>
  <JqxBarGauge ref="myBarGauge"
    :width="600" :height="600" :max="150" :values=" [102, 115, 130, 137] "
    :barSpacing="12"
  />
</template>
 
<script>
  import JqxBarGauge from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbargauge.vue';
 
  export default {
    components: {
      JqxBarGauge
    }
  }
</script>

Get the barSpacing property.

let barSpacing = this.$refs.myBarGauge.barSpacing;

Sets the base value of jqxBarGauge.

<template>
  <JqxBarGauge ref="myBarGauge"
    :width="600" :height="600" :max="150" :values=" [102, 115, 130, 137] "
    :baseValue="30"
  />
</template>
 
<script>
  import JqxBarGauge from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbargauge.vue';
 
  export default {
    components: {
      JqxBarGauge
    }
  }
</script>

Get the baseValue property.

let baseValue = this.$refs.myBarGauge.baseValue;

Sets the jqxBarGauge's color palette. jqxBarGauge suppports 27 color schemes from 'scheme01' to 'scheme27'. I's possible to set custom scheme in combination with "customColorScheme" property.

<template>
  <JqxBarGauge ref="myBarGauge"
    :width="600" :height="600" :max="150" :values=" [102, 115, 130, 137] "
    :colorScheme="'scheme02'"
  />
</template>
 
<script>
  import JqxBarGauge from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbargauge.vue';
 
  export default {
    components: {
      JqxBarGauge
    }
  }
</script>

Get the colorScheme property.

let colorScheme = this.$refs.myBarGauge.colorScheme;

Sets custom color palette in the BarGauge. This is used in combination with "colorScheme" property.

<template>
  <JqxBarGauge ref="myBarGauge"
    :width="600" :height="600" :max="150" :values=" [102, 115, 130, 137] "
    :colorScheme="'scheme'" :customColorScheme='{"name":"scheme","colors": ["#FFCF5E","#E83C64","#FF60B9","#52BDE8"] }'
  />
</template>
 
<script>
  import JqxBarGauge from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbargauge.vue';
 
  export default {
    components: {
      JqxBarGauge
    }
  }
</script>

Get the customColorScheme property.

let customColorScheme = this.$refs.myBarGauge.customColorScheme;

Sets or gets the values of the disabled property of jqxBarGauge. By default is false.

<template>
  <JqxBarGauge ref="myBarGauge"
    :width="600" :height="600" :max="150" :values=" [102, 115, 130, 137] "
    :disabled="true"
  />
</template>
 
<script>
  import JqxBarGauge from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbargauge.vue';
 
  export default {
    components: {
      JqxBarGauge
    }
  }
</script>

Get the disabled property.

let disabled = this.$refs.myBarGauge.disabled;

<template>
  <JqxBarGauge ref="myBarGauge"
    :width="600" :height="600" :max="150" :values=" [102, 115, 130, 137] "
    :endAngle="180"
  />
</template>
 
<script>
  import JqxBarGauge from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbargauge.vue';
 
  export default {
    components: {
      JqxBarGauge
    }
  }
</script>

Get the endAngle property.

let endAngle = this.$refs.myBarGauge.endAngle;

Sets or gets the formatFunction of the BarGauge. Used to make changes on the particular segment.

<template>
  <JqxBarGauge ref="myBarGauge"
    :width="600" :height="600" :max="150" :values=" [102, 115, 130, 137] "
    :formatFunction="formatFunction"
  />
</template>
 
<script>
  import JqxBarGauge from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbargauge.vue';
 
  export default {
    components: {
      JqxBarGauge
    },
    methods: {
      formatFunction: function (value, index, color) {
        return 'red';
      }
    }
  }
</script>

Sets or gets the BarGauge's height.

<template>
  <JqxBarGauge ref="myBarGauge"
    :width="600" :height="600" :max="150" :values=" [102, 115, 130, 137] "
  />
</template>
 
<script>
  import JqxBarGauge from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbargauge.vue';
 
  export default {
    components: {
      JqxBarGauge
    }
  }
</script>

Get the height property.

let height = this.$refs.myBarGauge.height;

This property is used to make fine settings on BarGauge labels at each segment.

<template>
  <JqxBarGauge ref="myBarGauge"
    :width="600" :height="600" :max="150" :values=" [102, 115, 130, 137] "
    :labels="labels"
  />
</template>
 
<script>
  import JqxBarGauge from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbargauge.vue';
 
  export default {
    components: {
      JqxBarGauge
    },
    data: function () {
      return {
        labels: {
          connectorColor: 'red',
          connectorWidth: 1,
          font: { color: 'darkseagreen', size: 12 },
          formatFunction: function (value, index) {
            return value + ' USD';
          },
          indent: 15,
          precision: 1,
          visible: true
        }
      }
    }
  }
</script>

Get the labels property.

let labels = this.$refs.myBarGauge.labels;

Sets or gets the end value of BarGauge.

<template>
  <JqxBarGauge ref="myBarGauge"
    :width="600" :height="600" :max="60" :values=" [102, 115, 130, 137] "
  />
</template>
 
<script>
  import JqxBarGauge from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbargauge.vue';
 
  export default {
    components: {
      JqxBarGauge
    }
  }
</script>

Get the max property.

let max = this.$refs.myBarGauge.max;

Sets or gets BarGauge's min. This property specifies the beggining of the BarGauge's scale.

<template>
  <JqxBarGauge ref="myBarGauge"
    :width="600" :height="600" :max="150" :values=" [102, 115, 130, 137] "
    :min="-25"
  />
</template>
 
<script>
  import JqxBarGauge from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbargauge.vue';
 
  export default {
    components: {
      JqxBarGauge
    }
  }
</script>

Get the min property.

let min = this.$refs.myBarGauge.min;

Sets or gets the relativeInnerRadius of jqxBarGauge. It's value represents the proportion between inner and outer radius.

<template>
  <JqxBarGauge ref="myBarGauge"
    :width="600" :height="600" :max="150" :values=" [102, 115, 130, 137] "
    :relativeInnerRadius="0"
  />
</template>
 
<script>
  import JqxBarGauge from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbargauge.vue';
 
  export default {
    components: {
      JqxBarGauge
    }
  }
</script>

Get the relativeInnerRadius property.

let relativeInnerRadius = this.$refs.myBarGauge.relativeInnerRadius;

This function is called when the BarGauge is initialized and the binding is complete.

<template>
  <JqxBarGauge ref="myBarGauge"
    :width="600" :height="600" :max="150" :values=" [102, 115, 130, 137] "
    :rendered="rendered"
  />
</template>
 
<script>
  import JqxBarGauge from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbargauge.vue';
 
  export default {
    components: {
      JqxBarGauge
    },
    methods: {
      rendered: function () {
        alert('rendered!')
      }
    }
  }
</script>

Sets or gets the startAngle of the BarGauge. Used to create geometry of the arc in the space.

<template>
  <JqxBarGauge ref="myBarGauge"
    :width="600" :height="600" :max="150" :values=" [102, 115, 130, 137] "
    :startAngle="200"
  />
</template>
 
<script>
  import JqxBarGauge from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbargauge.vue';
 
  export default {
    components: {
      JqxBarGauge
    }
  }
</script>

Get the startAngle property.

let startAngle = this.$refs.myBarGauge.startAngle;

Sets or gets the BarGauge's title. This property can be string or object with custom title settings.

<template>
  <JqxBarGauge ref="myBarGauge"
    :width="600" :height="600" :max="150" :values=" [102, 115, 130, 137] "
    :title="title"
  />
</template>
 
<script>
  import JqxBarGauge from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbargauge.vue';
 
  export default {
    components: {
      JqxBarGauge
    },
    data: function () {
      return {
        title: {
          text: 'Ranking',
          font: { color: 'rosybrown', size: 25 }
        }
      }
    }
  }
</script>

Get the title property.

let title = this.$refs.myBarGauge.title;

Sets or gets the BarGauge's tooltip.

<template>
  <JqxBarGauge ref="myBarGauge"
    :width="600" :height="600" :max="150" :values=" [102, 115, 130, 137] "
    :tooltip="tooltip"
  />
</template>
 
<script>
  import JqxBarGauge from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbargauge.vue';
 
  export default {
    components: {
      JqxBarGauge
    },
    data: function () {
      return {
        tooltip: {
          classname: 'myTooltip',
          visible: true,
          precision: 0,
          formatFunction: function (value, index) {
            return value + ' USD';
          }
        }
      }
    }
  }
</script>

Get the tooltip property.

let tooltip = this.$refs.myBarGauge.tooltip;

Sets or gets useGradient of the BarGauge. Change visualization of the segments between flat color or with gradient.

<template>
  <JqxBarGauge ref="myBarGauge"
    :width="600" :height="600" :max="150" :values=" [102, 115, 130, 137] "
    :useGradient="false"
  />
</template>
 
<script>
  import JqxBarGauge from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbargauge.vue';
 
  export default {
    components: {
      JqxBarGauge
    }
  }
</script>

Get the useGradient property.

let useGradient = this.$refs.myBarGauge.useGradient;

Sets or gets array of values for the BarGauge.

<template>
  <JqxBarGauge ref="myBarGauge"
    :width="600" :height="600" :max="150" :values=" [102, 115, 130, 137] "
  />
</template>
 
<script>
  import JqxBarGauge from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbargauge.vue';
 
  export default {
    components: {
      JqxBarGauge
    }
  }
</script>

Get the values property.

let values = this.$refs.myBarGauge.values;

Sets or gets the BarGauge's width.

<template>
  <JqxBarGauge ref="myBarGauge"
    :width="600" :height="600" :max="150" :values=" [102, 115, 130, 137] "
  />
</template>
 
<script>
  import JqxBarGauge from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbargauge.vue';
 
  export default {
    components: {
      JqxBarGauge
    }
  }
</script>

Get the width property.

let width = this.$refs.myBarGauge.width;

The event is raised when the BarGauge finish rendering. Commonly used in combination with drawStart event.

Code examples

Bind to the drawEnd event of jqxBarGauge.

<template>
  <JqxBarGauge ref="myBarGauge" @drawEnd="onDrawEnd($event)"
    :width="600" :height="600" :max="150" :values=" [102, 115, 130, 137] "
  />
</template>
 
<script>
  import JqxBarGauge from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbargauge.vue';
 
  export default {
    components: {
      JqxBarGauge
    },
    methods: {
      onDrawEnd: function (event) {
        alert('do something...');
      }
    }
  }
</script>

The event is raised when the BarGauge starts rendering again. Commonly used in combination with drawEnd event.

Code examples

Bind to the drawStart event of jqxBarGauge.

<template>
    <JqxBarGauge ref="myBarGauge" @drawStart="onDrawStart($event)"
                 :width="600" :height="600" :max="150"  />
</template>
<script>
    import JqxBarGauge from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbargauge.vue';
    export default {
        components: {
            JqxBarGauge
        },
        mounted: function () {
            this.$refs.myBarGauge.values = [102, 115, 130, 137];
        },
        methods: {
            onDrawStart: function (event) {
                alert('do something...');
            }
        }
    }
</script>

Fires when the jqxBarGauge is rendered for the first time. The BarGauge is initialized.

Code examples

Bind to the initialized event of jqxBarGauge.

<template>
  <JqxBarGauge ref="myBarGauge" @initialized="onInitialized($event)"
    :width="600" :height="600" :max="150" :values=" [102, 115, 130, 137] "
  />
</template>
 
<script>
  import JqxBarGauge from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbargauge.vue';
 
  export default {
    components: {
      JqxBarGauge
    },
    methods: {
      onInitialized: function (event) {
        alert('do something...');
      }
    }
  }
</script>

Fires when a BarGauge's tooltip is closed.

Code examples

Bind to the tooltipClose event of jqxBarGauge.

<template>
  <JqxBarGauge ref="myBarGauge" @tooltipClose="onTooltipClose($event)"
    :width="600" :height="600" :max="150" :values=" [102, 115, 130, 137] "
  />
</template>
 
<script>
  import JqxBarGauge from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbargauge.vue';
 
  export default {
    components: {
      JqxBarGauge
    },
    mounted: function () {
      this.$refs.myBarGauge.tooltip = { visible: true };
    },
    methods: {
      onTooltipClose: function (event) {
        alert('do something...');
      }
    }
  }
</script>

Fires when a BarGauge's tooltip is open.

Code examples

Bind to the tooltipOpen event of jqxBarGauge.

<template>
  <JqxBarGauge ref="myBarGauge" @tooltipOpen="onTooltipOpen($event)"
    :width="600" :height="600" :max="150" :values=" [102, 115, 130, 137] "
  />
</template>
 
<script>
  import JqxBarGauge from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbargauge.vue';
 
  export default {
    components: {
      JqxBarGauge
    },
    mounted: function () {
      this.$refs.myBarGauge.tooltip = { visible: true };
    },
    methods: {
      onTooltipOpen: function (event) {
        alert('do something...');
      }
    }
  }
</script>

Fires after the values are changed.

Code examples

Bind to the valueChanged event of jqxBarGauge.

<template>
  <JqxBarGauge ref="myBarGauge" @valueChanged="onValueChanged($event)"
    :width="600" :height="600" :max="150" :values=" [102, 115, 130, 137] "
  />
</template>
 
<script>
  import JqxBarGauge from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbargauge.vue';
 
  export default {
    components: {
      JqxBarGauge
    },
    methods: {
      onValueChanged: function (event) {
        alert('do something...');
      }
    }
  }
</script>

Refreshes the BarGauge.

<template>
  <JqxBarGauge ref="myBarGauge"
    :width="600" :height="600" :max="150" :values=" [102, 115, 130, 137] "
  />
</template>
 
<script>
  import JqxBarGauge from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbargauge.vue';
 
  export default {
    components: {
      JqxBarGauge
    },
    mounted: function () {
      this.$refs.myBarGauge.refresh();
    }
  }
</script>

Renders the BarGauge contents. This method completely refreshes the BarGauge.

<template>
  <JqxBarGauge ref="myBarGauge"
    :width="600" :height="600" :max="150" :values=" [102, 115, 130, 137] "
  />
</template>
 
<script>
  import JqxBarGauge from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbargauge.vue';
 
  export default {
    components: {
      JqxBarGauge
    },
    mounted: function () {
      this.$refs.myBarGauge.render();
    }
  }
</script>

Returns an array of the BarGauge values.

<template>
  <JqxBarGauge ref="myBarGauge"
    :width="600" :height="600" :max="150" :values=" [102, 115, 130, 137] "
  />
</template>
 
<script>
  import JqxBarGauge from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbargauge.vue';
 
  export default {
    components: {
      JqxBarGauge
    },
    mounted: function () {
      const value = this.$refs.myBarGauge.val([112, 125, 150, 137]);
    }
  }
</script>