All Components

RadialGauge Overview

The RadialGauge represents values on a circular arc.

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

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

Basic Usage

The following example demonstrates the RadialGauge in action.

<div id="vueapp" class="vue-app">
    <div class="example-config">
        <kendo-slider v-model="value"
                      :min="0"
                      :max="50"
                      :small-step="10">
        </kendo-slider>
        <label for="value">Value</label>
    </div>
    <kendo-radialgauge ref="radialgauge"
                       :scale-minor-unit="5"
                       :scale-start-angle="-30"
                       :scale-end-angle="210"
                       :scale-max="50">
        <kendo-radialgauge-pointer :value="20" :color="'#ff6358'"></kendo-radialgauge-pointer>
    </kendo-radialgauge>
</div>
Vue.use(GaugesInstaller);
Vue.use(InputsInstaller);
new Vue({
    el: '#vueapp',
     data: {
        value: 20
    },
    watch: {
        'value': function (newValue){
            this.$refs.radialgauge.kendoWidget().value(newValue)
        }
    }
})

Features and Functionalities

In this article