pointerArray
The pointer configuration options. It accepts an Array of pointers, each with it's own configuration options.
Example - specify single pointer
<div id="gauge"></div>
<script>
$("#gauge").kendoRadialGauge({
pointer: [{
value: 20
}]
});
</script>Example - specify multiple pointers
<div id="gauge"></div>
<script>
$("#gauge").kendoRadialGauge({
pointer: [{
value: 20
}, {
value: 40
}]
});
</script>pointer.capObject
The cap configuration options.
Example
<div id="gauge"></div>
<script>
$("#gauge").kendoRadialGauge({
pointer: [{
value: 60,
cap: {
color: "#ff0000",
size: 0.8
}
}]
});
</script>pointer.cap.colorString
The color of the cap. Any valid CSS color string will work here, including hex and rgb.
Example
<div id="gauge"></div>
<script>
$("#gauge").kendoRadialGauge({
pointer: [{
value: 75,
cap: {
color: "#00aa00"
}
}]
});
</script>pointer.cap.sizeNumber
The size of the cap in percents. (from 0 to 1)
Example
<div id="gauge"></div>
<script>
$("#gauge").kendoRadialGauge({
pointer: [{
value: 50,
cap: {
color: "#0066cc",
size: 0.6
}
}]
});
</script>pointer.colorString
The color of the pointer. Any valid CSS color string will work here, including hex and rgb.
Example
<div id="gauge"></div>
<script>
$("#gauge").kendoRadialGauge({
pointer: [{
value: 65,
color: "#ff6600"
}]
});
</script>pointer.lengthNumber
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.
Example - specify pointers with different lengths
<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.valueNumber
The value of the gauge.
Example
<div id="gauge"></div>
<script>
$("#gauge").kendoRadialGauge({
pointer: [{
value: 85
}],
scale: {
min: 0,
max: 100
}
});
</script>In this article