All Components

LinearGauge Overview

The LinearGauge represents values on a linear scale.

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

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

Basic Usage

The following example demonstrates the LinearGauge 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)
        }
    }
})

Functionality and Features

In this article