New to Kendo UI for jQuery? Start a free 30-day trial

Pointer

configuration

The pointer configuration options. It accepts an Array of pointers, each with it's own configuration options.

pointer

Array

<div id="gauge"></div>
<script>
$("#gauge").kendoRadialGauge({
    pointer: [{
    value: 20
    }]
});
</script>

<div id="gauge"></div>
<script>
$("#gauge").kendoRadialGauge({
    pointer: [{
    value: 20
    }, {
    value: 40
    }]
});
</script>

pointer.cap

Object

The cap configuration options.

<div id="gauge"></div>
<script>
$("#gauge").kendoRadialGauge({
    pointer: [{
        value: 60,
        cap: {
            color: "#ff0000",
            size: 0.8
        }
    }]
});
</script>

pointer.color

String

The color of the pointer. Any valid CSS color string will work here, including hex and rgb.

<div id="gauge"></div>
<script>
$("#gauge").kendoRadialGauge({
    pointer: [{
        value: 65,
        color: "#ff6600"
    }]
});
</script>

pointer.length

Number

The pointer length (in percent) that is based on the distance to the scale. The default length of 1 indicates that the pointer exactly reaches the scale. Accepts values between 0.1 and 1.5.

<div id="gauge"></div>
<script>
$("#gauge").kendoRadialGauge({
    pointer: [{
        value: 10,
        color: '#ffd246',
        length: 0.5
    }, {
        value: 20,
        color: '#28b4c8',
        length: 0.75
    }, {
        value: 30,
        color: '#78d237',

        // Default length
        // length: 1
    }]
});
</script>

pointer.value