All Components

Color Ranges

The ArcGauge enables you to set different colors depending on the current value.

For more information, refer to the colors configuration.

<div id="vueapp" class="vue-app">
    <kendo-arcgauge :value="42"
                    :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);
new Vue({
    el: '#vueapp'
})
In this article