All Components

Linear Gauge Overview

The Linear Gauge represents values on a linear scale.

All graphics render on the client in the Scalable Vector Graphics (SVG) format.

The Linear Gauge wrapper for Vue is a client-side wrapper for the Kendo UI Linear Gauge widget.

Basic Usage

The following example demonstrates the Linear Gauge in action.

<div id="vueapp" class="vue-app">
    <div class="example-config">
        <kendo-slider v-model="value"
                    :min="0"
                    :max="50"
                    v-model="value"
                    :small-step="10">
        </kendo-slider>
        <label for="value">Value</label>
    </div>
    <kendo-lineargauge ref="lineargauge" :gauge-area-width="250"
                       :scale-major-unit="20"
                       :scale-minor-unit="2"
                       :scale-min="0"
                       :value="20"
                       :scale-max="50"
                       :scale-vertical="true">
        <kendo-lineargauge-pointer :value="20" :color="'#ff6358'"></kendo-lineargauge-pointer>
    </kendo-lineargauge>
</div>
Vue.use(GaugesInstaller);
Vue.use(InputsInstaller);
new Vue({
    el: '#vueapp',
     data: {
        value: 20
    },
    watch: {
        'value': function (newValue){
            this.$refs.lineargauge.kendoWidget().value(newValue)
        }
    }
})

Features and Functionalities

Value Ranges

To create a Linear Gauge with defined minimum and maximum values, use the :scale-min and :scale-max options.

<div id="vueapp" class="vue-app">
    <kendo-lineargauge  :scale-min="0"
                        :scale-max="50">
            <kendo-lineargauge-pointer :value="10" :color="'#ff6358'"></kendo-lineargauge-pointer>
    </kendo-lineargauge>
</div>
Vue.use(GaugesInstaller);
new Vue({
    el: '#vueapp'
})

Pointers

The following example demonstrates how to create a Linear Gauge with two pointers. The Linear Gauge can contain an array of pointers. For more information, refer to the pointer configuration.

<div id="vueapp" class="vue-app">
    <kendo-lineargauge  :scale-min="0"
                        :scale-max="50">
        <kendo-lineargauge-pointer :value="30" :color="'blue'"></kendo-lineargauge-pointer>
        <kendo-lineargauge-pointer :value="20" :color="'red'"></kendo-lineargauge-pointer>
    </kendo-lineargauge>
</div>
Vue.use(GaugesInstaller);
new Vue({
    el: '#vueapp'
})

Orientation

To render a Linear Gauge with a vertical or horizontal orientation, set its :scale-vertical option to true or false respectively.

<div id="vueapp" class="vue-app">
    <kendo-lineargauge  :scale-min="0"
                        :scale-max="50"
                        :scale-vertical="false">
        <kendo-lineargauge-pointer :value="30" :color="'#ff6358'"></kendo-lineargauge-pointer>
    </kendo-lineargauge>
</div>
Vue.use(GaugesInstaller);
new Vue({
    el: '#vueapp'
})
In this article