All Components

ArcGauge Overview

The ArcGauge displays a value range which is represented by an arc.

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

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

Basic Usage

The following example demonstrates the ArcGauge in action.

<div id="vueapp" class="vue-app">
    <div class="example-config">
        <kendo-slider v-model="value"
                        :min="0"
                        :max="100"
                        v-model="value"
                        :small-step="10">
        </kendo-slider>
        <label for="value">Value</label>
    </div>
    <kendo-arcgauge ref="arcgauge"
                    :scale-min="0"
                    :value="20"
                    :scale-max="100">
        <kendo-arcgauge-color :to="25" :color="'#0058e9'"></kendo-arcgauge-color>
        <kendo-arcgauge-color :from="25" :to="50" :color="'#37b400'"></kendo-arcgauge-color>
        <kendo-arcgauge-color :from="50" :to="75" :color="'#ffc000'"></kendo-arcgauge-color>
        <kendo-arcgauge-color :from="75" :color="'#f31700'"></kendo-arcgauge-color>
    </kendo-arcgauge>
</div>
Vue.use(GaugesInstaller);
Vue.use(InputsInstaller);
new Vue({
    el: '#vueapp',
     data: {
        value: 20
    },
    watch: {
        'value': function (newValue){
            this.$refs.arcgauge.kendoWidget().value(newValue)
        }
    }
})

Functionality and Features

In this article