scale.rangesArray
The ranges of the scale.
Example
<div id="linear-gauge"></div>
<script>
$("#linear-gauge").kendoLinearGauge({
scale: {
ranges: [{
from: 10,
to: 20,
color: "green"
}]
}
});
</script>scale.ranges.fromNumber
The start position of the range in scale units.
Example
<div id="gauge"></div>
<script>
$("#gauge").kendoLinearGauge({
pointer: {
value: 30
},
scale: {
min: 0,
max: 50,
ranges: [{
from: 0,
to: 20,
color: "#4caf50"
}]
}
});
</script>scale.ranges.toNumber
The end position of the range in scale units.
Example
<div id="gauge"></div>
<script>
$("#gauge").kendoLinearGauge({
pointer: {
value: 30
},
scale: {
min: 0,
max: 50,
ranges: [{
from: 20,
to: 40,
color: "#ff9800"
}]
}
});
</script>scale.ranges.opacityNumber
The opacity of the range.
Example
<div id="gauge"></div>
<script>
$("#gauge").kendoLinearGauge({
pointer: {
value: 30
},
scale: {
min: 0,
max: 50,
ranges: [{
from: 10,
to: 30,
color: "#f44336",
opacity: 0.7
}]
}
});
</script>scale.ranges.colorString
The color of the range. Any valid CSS color string will work here, including hex and rgb.
Example
<div id="gauge"></div>
<script>
$("#gauge").kendoLinearGauge({
pointer: {
value: 30
},
scale: {
min: 0,
max: 50,
ranges: [{
from: 35,
to: 50,
color: "#9c27b0"
}]
}
});
</script>In this article