All Components

Radial Gauge Overview

The Radial Gauge represents values on a circular arc.

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

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

Basic Usage

The following example demonstrates the Radial Gauge 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

Value Ranges

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

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

Pointers

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

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