Vue UI Components Documentation

Sets or gets jqxLinearGauge's animation duration [ms].

<template>
  <JqxLinearGauge ref="myLinearGauge" 
  :ticksMinor="ticksMinor" :ticksMajor="ticksMajor" :value="0" :animationDuration="3000" /> 
</template> 
 
<script> 
  import JqxLinearGauge from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlineargauge.vue'; 
 
  export default { 
    components: { 
      JqxLinearGauge 
    }, 
    data: function () {
      return {
        ticksMajor: {
          size: '10%',
          interval: 10
        },
        ticksMinor: {
          size: '5%',
          interval: 2.5
        }
      }
    },
    mounted: function() { 
      this.$refs.myLinearGauge.val(50);
    }
  }
</script>

Sets or gets the gauge's properties for it's background.

'borderType' - specifies the border type. Possible values are 'rectangle' and 'roundedRectangle'

'borderRadius' - sets the border radius

'visible' - indicates if the border will be visible

'style' - sets border style (color and thickness

'showGradient' - whether a gradient background will be used

<template>
  <JqxLinearGauge ref="myLinearGauge"
    :ticksMinor="ticksMinor" :ticksMajor="ticksMajor" :value="0" :background="background"
  />
</template>
 
<script>
  import JqxLinearGauge from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlineargauge.vue';
 
  export default {
    components: {
      JqxLinearGauge
    },
    data: function () {
      return  {
        background: {
          style: {
            stroke: '#ffaaaa',
            fill: '#ffaaaa'
          }
       },
        ticksMajor: {
          size: '10%',
          interval: 10
        },
        ticksMinor: {
          size: '5%',
          interval: 2.5
        }
      }
    }
  }
</script>

Sets the gauge's color pallete. jqxLinearGauge suppports 11 color schemes from 'scheme01' to 'scheme11'.

<template>
  <JqxLinearGauge ref="myLinearGauge"
    :ticksMinor="ticksMinor" :ticksMajor="ticksMajor" :value="0" :colorScheme="'scheme06'"
  />
</template>
 
<script>
  import JqxLinearGauge from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlineargauge.vue';
 
  export default {
    components: {
      JqxLinearGauge
    },
    data: function () {
      return  {
        ticksMajor: {
          size: '10%',
          interval: 10
        },
        ticksMinor: {
          size: '5%',
          interval: 2.5
        }
      }
    }
  }
</script>

Sets or gets whether the jqxLinearGauge is disabled.

<template>
  <JqxLinearGauge ref="myLinearGauge"
    :ticksMinor="ticksMinor" :ticksMajor="ticksMajor" :value="0" :disabled="true"
  />
</template>
 
<script>
  import JqxLinearGauge from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlineargauge.vue';
 
  export default {
    components: {
      JqxLinearGauge
    },
    data: function () {
      return  {
        ticksMajor: {
          size: '10%',
          interval: 10
        },
        ticksMinor: {
          size: '5%',
          interval: 2.5
        }
      }
    }
  }
</script>

Sets or gets jqxLinearGauge's animation easing.

'linear'

'easeOutBack'

'easeInQuad'

'easeInOutCirc'

'easeInOutSine'

'easeOutCubic'

<template>
  <JqxLinearGauge ref="myLinearGauge" 
  :ticksMinor="ticksMinor" :ticksMajor="ticksMajor" :value="0" :easing="'easeInQuad'" /> 
</template> 
 
<script> 
  import JqxLinearGauge from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlineargauge.vue'; 
 
  export default { 
    components: { 
      JqxLinearGauge 
    }, 
    data: function () {
      return {
        ticksMajor: {
          size: '10%',
          interval: 10
        },
        ticksMinor: {
          size: '5%',
          interval: 2.5
        }
      }
    },
    mounted: function() { 
      this.$refs.myLinearGauge.val(50);
    }
  }
</script>

Sets or gets the gauge's height. This property accepts size in pixels and percentage.

<template>
  <JqxLinearGauge ref="myLinearGauge"
    :ticksMinor="ticksMinor" :ticksMajor="ticksMajor" :value="0" :height="300"
  />
</template>
 
<script>
  import JqxLinearGauge from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlineargauge.vue';
 
  export default {
    components: {
      JqxLinearGauge
    },
    data: function () {
      return  {
        ticksMajor: {
          size: '10%',
          interval: 10
        },
        ticksMinor: {
          size: '5%',
          interval: 2.5
        }
      }
    }
  }
</script>

Enables the jqxLinearGauge 64-bit number support.

Note: If this property is set to true, the properties value, min, max, ranges.startValue, ranges.endValue, ticksMinor.interval, ticksMajor.interval and labels.interval should be set to string values.

<template>
  <JqxLinearGauge ref="myLinearGauge"
    :ticksMinor="ticksMinor" :ticksMajor="ticksMajor" :value="0" :int64="true"
  />
</template>
 
<script>
  import JqxLinearGauge from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlineargauge.vue';
 
  export default {
    components: {
      JqxLinearGauge
    },
    data: function () {
      return  {
        ticksMajor: {
          size: '10%',
          interval: 10
        },
        ticksMinor: {
          size: '5%',
          interval: 2.5
        }
      }
    }
  }
</script>

Sets or gets the gauge's properties for it's labels.

position - specifies the gauge's labels position. Possible values for this property are 'far', 'near' and 'both'. If 'near' is used labels will be visible only in the left hand side of the ticks. If the 'far' value is set ticks will be visible only in the right hand side of the ticks. Otherwise, if the 'both' value is used the labels will be shown in both sides of the ticks

style - specifies the gauge's pointer style. Here you can set it's fill or stroke color

interval - specifies labels's frequency

offset - specifies labels's offset from the ticks

formatValue - callback used for formatting the label. This function accepts two parameters. The first one is the label's value and the second one is the label's position

visible - indicates whether the labels will be visible

<template>
  <JqxLinearGauge ref="myLinearGauge"
    :ticksMinor="ticksMinor" :ticksMajor="ticksMajor" :value="0" :labels="labels"
  />
</template>
 
<script>
  import JqxLinearGauge from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlineargauge.vue';
 
  export default {
    components: {
      JqxLinearGauge
    },
    data: function () {
      return  {
        labels: {
          position: 'far',
          interval: 20,
          offset: 3,
          visible: true
        },
        ticksMajor: {
          size: '10%',
          interval: 10
        },
        ticksMinor: {
          size: '5%',
          interval: 2.5
        }
      }
    }
  }
</script>

Sets or gets gauge's minimum value.

<template>
  <JqxLinearGauge ref="myLinearGauge"
    :ticksMinor="ticksMinor" :ticksMajor="ticksMajor" :value="0" :min="0"
  />
</template>
 
<script>
  import JqxLinearGauge from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlineargauge.vue';
 
  export default {
    components: {
      JqxLinearGauge
    },
    data: function () {
      return  {
        ticksMajor: {
          size: '10%',
          interval: 10
        },
        ticksMinor: {
          size: '5%',
          interval: 2.5
        }
      }
    }
  }
</script>

Sets or gets jqxLinearGauge's max value.

<template>
  <JqxLinearGauge ref="myLinearGauge"
    :ticksMinor="ticksMinor" :ticksMajor="ticksMajor" :value="0" :max="70"
  />
</template>
 
<script>
  import JqxLinearGauge from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlineargauge.vue';
 
  export default {
    components: {
      JqxLinearGauge
    },
    data: function () {
      return  {
        ticksMajor: {
          size: '10%',
          interval: 10
        },
        ticksMinor: {
          size: '5%',
          interval: 2.5
        }
      }
    }
  }
</script>

Sets or gets jqxLineaerGauge's orientation.

'vertical'

'horizontal'

<template>
  <JqxLinearGauge ref="myLinearGauge"
    :ticksMinor="ticksMinor" :ticksMajor="ticksMajor" :value="0" :width="300"
    :height="100" :orientation="'horizontal'"
  />
</template>
 
<script>
  import JqxLinearGauge from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlineargauge.vue';
 
  export default {
    components: {
      JqxLinearGauge
    },
    data: function () {
      return  {
        ticksMajor: {
          size: '10%',
          interval: 10
        },
        ticksMinor: {
          size: '5%',
          interval: 2.5
        }
      }
    }
  }
</script>

Sets or gets the gauge's properties for it's pointer.

'pointerType' - specifies the pointer type. Possible values for this property are  - 'default' and 'rectangle'. If it's value is 'default' the pointer will be column otherwise it'll be an arrow

'style' - specifies the gauge's pointer style. Here you can set it's fill or stroke color

'size' - specifies pointer's size. This property can be set in percents ('0%' - '100%') or in pixels

'visible' - indicates whether the pointer will be visible

'offset' - indicates the left offset of the pointer

<template>
  <JqxLinearGauge ref="myLinearGauge"
    :ticksMinor="ticksMinor" :ticksMajor="ticksMajor" :value="0" :pointer="pointer"
  />
</template>
 
<script>
  import JqxLinearGauge from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlineargauge.vue';
 
  export default {
    components: {
      JqxLinearGauge
    },
    data: function () {
      return  {
        pointer: {
          pointerType: 'arrow',
          size: '10%',
          visible: true,
          offset: 10
        },
        ticksMajor: {
          size: '10%',
          interval: 10
        },
        ticksMinor: {
          size: '5%',
          interval: 2.5
        }
      }
    }
  }
</script>

Sets or gets ranges offset from the ticks.

<template>
  <JqxLinearGauge ref="myLinearGauge"
    :ticksMinor="ticksMinor" :ticksMajor="ticksMajor" :value="0" :rangesOffset="rangesOffset"
    :ranges="ranges"
  />
</template>
 
<script>
  import JqxLinearGauge from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlineargauge.vue';
 
  export default {
    components: {
      JqxLinearGauge
    },
    data: function () {
      return  {
        rangesOffset: 10,
        ranges: [{
          startValue: 0,
          endValue: 20,
          style: {
            fill: '#FFA200',
            stroke: '#FFA200'
          }
        }, {
          startValue: 20,
          endValue: 45,
          style: {
            fill: '#FF4800',
            stroke: '#FF4800'
          }
        }],
        ticksMajor: {
          size: '10%',
          interval: 10
        },
        ticksMinor: {
          size: '5%',
          interval: 2.5
        }
      }
    }
  }
</script>

Sets or gets the size of the ranges. This property can be set in percentage or in pixels.

<template>
  <JqxLinearGauge ref="myLinearGauge"
    :ticksMinor="ticksMinor" :ticksMajor="ticksMajor" :value="0" :rangeSize="rangeSize"
    :ranges="ranges"
  />
</template>
 
<script>
  import JqxLinearGauge from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlineargauge.vue';
 
  export default {
    components: {
      JqxLinearGauge
    },
    data: function () {
      return  {
        rangeSize: '7%',
        ranges: [{
          startValue: 0,
          endValue: 20,
          style: {
            fill: '#FFA200',
            stroke: '#FFA200'
          }
        }, {
          startValue: 20,
          endValue: 45,
          style: {
            fill: '#FF4800',
            stroke: '#FF4800'
          }
        }],
        ticksMajor: {
          size: '10%',
          interval: 10
        },
        ticksMinor: {
          size: '5%',
          interval: 2.5
        }
      }
    }
  }
</script>

This property is array from objects. Each object is different range. The range is colored area with specified size.

'startValue' - the value from which the range will start

'endValue' - the value where the current range will end

'style' - this property is object containing style information for the range. It accepts properties like 'fill', 'stroke', etc (typical for SVG/VML)

<template>
  <JqxLinearGauge ref="myLinearGauge"
    :ticksMinor="ticksMinor" :ticksMajor="ticksMajor" :value="0" :ranges="ranges"
  />
</template>
 
<script>
  import JqxLinearGauge from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlineargauge.vue';
 
  export default {
    components: {
      JqxLinearGauge
    },
    data: function () {
      return  {
        ranges: [{
          startValue: 0,
          endValue: 10,
          style: {
            fill: '#FFA200',
            stroke: '#FFA200'
          }
        }, { 
          startValue: 10,
          endValue: 40,
          style: {
            fill: '#FF4800',
            stroke: '#FF4800'
          } 
        }],
        ticksMajor: {
          size: '10%',
          interval: 10
        },
        ticksMinor: {
          size: '5%',
          interval: 2.5
        }
      }
    }
  }
</script>

This property indicates whether the gauge's ranges will be visible.

<template>
  <JqxLinearGauge ref="myLinearGauge"
    :ticksMinor="ticksMinor" :ticksMajor="ticksMajor" :value="0" :showRanges="false"
  />
</template>
 
<script>
  import JqxLinearGauge from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlineargauge.vue';
 
  export default {
    components: {
      JqxLinearGauge
    },
    data: function () {
      return  {
        ticksMajor: {
          size: '10%',
          interval: 10
        },
        ticksMinor: {
          size: '5%',
          interval: 2.5
        }
      }
    }
  }
</script>

Sets or gets the style of the line connecting all the ticks.

<template>
  <JqxLinearGauge ref="myLinearGauge"
    :ticksMinor="ticksMinor" :ticksMajor="ticksMajor" :value="0" :scaleStyle="scaleStyle"
  />
</template>
 
<script>
  import JqxLinearGauge from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlineargauge.vue';
 
  export default {
    components: {
      JqxLinearGauge
    },
    data: function () {
      return  {
        scaleStyle: {
          stroke: '#000000',
          'stroke-width': 3
          },
        ticksMajor: {
          size: '10%',
          interval: 10
        },
        ticksMinor: {
          size: '5%',
          interval: 2.5
        }
      }
    }
  }
</script>

Sets or gets the length of the scale. This property could be set in percentage or in pixels.

<template>
  <JqxLinearGauge ref="myLinearGauge"
    :ticksMinor="ticksMinor" :ticksMajor="ticksMajor" :value="0" :scaleLength="'80%'"
  />
</template>
 
<script>
  import JqxLinearGauge from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlineargauge.vue';
 
  export default {
    components: {
      JqxLinearGauge
    },
    data: function () {
      return  {
        ticksMajor: {
          size: '10%',
          interval: 10
        },
        ticksMinor: {
          size: '5%',
          interval: 2.5
        }
      }
    }
  }
</script>

Sets or gets the offset of the ticks. The first element of the array is the left offset and the second one is the top offset. This property can be set in pixels or percentage.

<template>
  <JqxLinearGauge ref="myLinearGauge"
    :ticksMinor="ticksMinor" :ticksMajor="ticksMajor" :value="0" :ticksOffset=" [50,10] "
  />
</template>
 
<script>
  import JqxLinearGauge from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlineargauge.vue';
 
  export default {
    components: {
      JqxLinearGauge
    },
    data: function () {
      return  {
        ticksMajor: {
          size: '10%',
          interval: 10
        },
        ticksMinor: {
          size: '5%',
          interval: 2.5
        }
      }
    }
  }
</script>

Sets or gets jqxLineaerGauge's ticks position.

'near'-ticks will be visible only in the left side of the scale

'far'-ticks will be visible only in the right side of the scale

'both'-ticks will be visible in both sides

<template>
  <JqxLinearGauge ref="myLinearGauge"
    :ticksMinor="ticksMinor" :ticksMajor="ticksMajor" :value="0" :ticksPosition="'far'"
  />
</template>
 
<script>
  import JqxLinearGauge from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlineargauge.vue';
 
  export default {
    components: {
      JqxLinearGauge
    },
    data: function () {
      return  {
        ticksMajor: {
          size: '10%',
          interval: 10
        },
        ticksMinor: {
          size: '5%',
          interval: 2.5
        }
      }
    }
  }
</script>

Sets or gets the gauge's properties for it's minor ticks.

'size' - specifies the length of the tick. This property can be set in pixels or in percentage

'interval' - specifies the ticks frequency. With interval equals to 5 each fifth value of the gauge will have a minor tick

'visible' - indicates if the minor ticks will be visible

'style' - sets ticks style (color and thickness)

<template>
  <JqxLinearGauge ref="myLinearGauge"
    :ticksMinor="ticksMinor" :ticksMajor="ticksMajor" :value="0"
  />
</template>
 
<script>
  import JqxLinearGauge from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlineargauge.vue';
 
  export default {
    components: {
      JqxLinearGauge
    },
    data: function () {
      return  {
        ticksMajor: {
          size: '10%',
          interval: 10
        },
        ticksMinor: {
          size: '5%',
          interval: 2.5
        }
      }
    }
  }
</script>

Sets or gets the gauge's properties for it's major ticks.

'size' - specifies the length of the tick. This property is measured in pixels or percentage

'interval' - specifies the ticks frequency. With interval equals to 5 each fifth value of the gauge will have a major tick

'visible' - indicates if the major ticks will be visible

'style' - sets ticks style (color and thickness)

<template>
  <JqxLinearGauge ref="myLinearGauge"
    :ticksMinor="ticksMinor" :ticksMajor="ticksMajor" :value="0"
  />
</template>
 
<script>
  import JqxLinearGauge from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlineargauge.vue';
 
  export default {
    components: {
      JqxLinearGauge
    },
    data: function () {
      return  {
        ticksMajor: {
          size: '10%',
          interval: 10
        },
        ticksMinor: {
          size: '5%',
          interval: 2.5
        }
      }
    }
  }
</script>

Sets or gets gauge's value.

<template>
  <JqxLinearGauge ref="myLinearGauge"
    :ticksMinor="ticksMinor" :ticksMajor="ticksMajor" :value="0"
  />
</template>
 
<script>
  import JqxLinearGauge from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlineargauge.vue';
 
  export default {
    components: {
      JqxLinearGauge
    },
    data: function () {
      return  {
        ticksMajor: {
          size: '10%',
          interval: 10
        },
        ticksMinor: {
          size: '5%',
          interval: 2.5
        }
      }
    }
  }
</script>

Sets or gets the gauge's width. This property accepts size in pixels and percentage.

<template>
  <JqxLinearGauge ref="myLinearGauge"
    :ticksMinor="ticksMinor" :ticksMajor="ticksMajor" :value="0" :width="100"
  />
</template>
 
<script>
  import JqxLinearGauge from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlineargauge.vue';
 
  export default {
    components: {
      JqxLinearGauge
    },
    data: function () {
      return  {
        ticksMajor: {
          size: '10%',
          interval: 10
        },
        ticksMinor: {
          size: '5%',
          interval: 2.5
        }
      }
    }
  }
</script>

The event is raised when the gauge's value is changing.

Code examples

Bind to the valueChanging event of jqxLinearGauge.

<template>
  <div>
    <JqxLinearGauge ref="myLinearGauge" @valueChanging="onValueChanging($event)"
            :ticksMinor="ticksMinor" :ticksMajor="ticksMajor" :value="0" />
    <JqxButton style="margin-top: 20px;" :width="80" @click="changeValue()">Change value</JqxButton>
  </div>
</template>
<script>
  import JqxLinearGauge from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlineargauge.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
  export default {
    components: {
      JqxLinearGauge,
      JqxButton
    },
    data: function () {
      return {
        ticksMajor: {
          size: '10%',
          interval: 10
        },
        ticksMinor: {
          size: '5%',
          interval: 2.5
        }
      }
    },
    methods: {
      changeValue: function () {
        this.$refs.myLinearGauge.val(5);
      },
      onValueChanging: function (event) {
        alert('do something...');
      }
    }
  }
</script>

The event is raised when the gauge's value is changed.

Code examples

Bind to the valueChanged event of jqxLinearGauge.

<template>
  <div>
    <JqxLinearGauge ref="myLinearGauge" @valueChanged="onValueChanged($event)"
            :ticksMinor="ticksMinor" :ticksMajor="ticksMajor" :value="0" />
    <JqxButton style="margin-top: 20px;" :width="80" @click="changeValue()">Change value</JqxButton>
  </div>
</template>
<script>
  import JqxLinearGauge from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlineargauge.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
  export default {
    components: {
      JqxLinearGauge,
      JqxButton
    },
    data: function () {
      return {
        ticksMajor: {
          size: '10%',
          interval: 10
        },
        ticksMinor: {
          size: '5%',
          interval: 2.5
        }
      }
    },
    methods: {
      changeValue: function () {
        this.$refs.myLinearGauge.val(30);
      },
      onValueChanged: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This method disables the gauge.

<template>
  <JqxLinearGauge ref="myLinearGauge"
    :ticksMinor="ticksMinor" :ticksMajor="ticksMajor" :value="0"
  />
</template>
 
<script>
  import JqxLinearGauge from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlineargauge.vue';
 
  export default {
    components: {
      JqxLinearGauge
    },
    data: function () {
      return  {
        ticksMajor: {
          size: '10%',
          interval: 10
        },
        ticksMinor: {
          size: '5%',
          interval: 2.5
        }
      }
    },
    mounted: function () {
      this.$refs.myLinearGauge.disable();
    }
  }
</script>

This method enables the gauge.

<template>
  <JqxLinearGauge ref="myLinearGauge"
    :ticksMinor="ticksMinor" :ticksMajor="ticksMajor" :value="0"
  />
</template>
 
<script>
  import JqxLinearGauge from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlineargauge.vue';
 
  export default {
    components: {
      JqxLinearGauge
    },
    data: function () {
      return  {
        ticksMajor: {
          size: '10%',
          interval: 10
        },
        ticksMinor: {
          size: '5%',
          interval: 2.5
        }
      }
    },
    mounted: function () {
      this.$refs.myLinearGauge.enable();
    }
  }
</script>

Sets or gets the value.

<template>
  <JqxLinearGauge ref="myLinearGauge"
    :ticksMinor="ticksMinor" :ticksMajor="ticksMajor" :value="0"
  />
</template>
 
<script>
  import JqxLinearGauge from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlineargauge.vue';
 
  export default {
    components: {
      JqxLinearGauge
    },
    data: function () {
      return  {
        ticksMajor: {
          size: '10%',
          interval: 10
        },
        ticksMinor: {
          size: '5%',
          interval: 2.5
        }
      }
    },
    mounted: function () {
      const value = this.$refs.myLinearGauge.val();
    }
  }
</script>