gaugeArea.border Object
The border of the gauge area.
gaugeArea.border.color String
(default: "black")
The color of the border. Any valid CSS color string will work here, including hex and rgb.
Example - set gaugeArea border color
<div id="gauge-container">
<div id="gauge"></div>
</div>
<script>
$(function() {
var value = $("#gauge-value").val();
$("#gauge").kendoLinearGauge({
pointer: {
value: 28
},
gaugeArea: {
border: {
color: "green",
width: "4px"
}
},
scale: {
majorUnit: 20,
minorUnit: 2,
min: -40,
max: 60,
vertical: true,
ranges: [
{
from: -40,
to: -20,
color: "#2798df"
}
]
}
});
});
</script>
<style>
#gauge-container {
text-align: center;
margin: 0 auto;
background-size: contain;
padding: 18px;
width: 300px;
height: 300px;
}
#gauge {
height: 100%;
display: inline-block;
*display: inline;
zoom: 1;
}
</style>
gaugeArea.border.dashType String
(default: "solid")
The dash type of the border.
"solid"
Specifies a solid line.
"dot"
Specifies a line consisting of dots.
"dash"
Specifies a line consisting of dashes.
"longDash"
Specifies a line consisting of a repeating pattern of long-dash.
"dashDot"
Specifies a line consisting of a repeating pattern of dash-dot.
"longDashDot"
Specifies a line consisting of a repeating pattern of long-dash-dot.
"longDashDotDot"
Specifies a line consisting of a repeating pattern of long-dash-dot-dot.
gaugeArea.border.width Number
(default: 0)
The width of the border.
Example - set gaugeArea border width
<div id="gauge-container">
<div id="gauge"></div>
</div>
<script>
$(function() {
var value = $("#gauge-value").val();
$("#gauge").kendoLinearGauge({
pointer: {
value: 28
},
gaugeArea: {
border: {
color: "green",
width: 4
}
},
scale: {
majorUnit: 20,
minorUnit: 2,
min: -40,
max: 60,
vertical: true,
ranges: [
{
from: -40,
to: -20,
color: "#2798df"
}
]
}
});
});
</script>
<style>
#gauge-container {
text-align: center;
margin: 0 auto;
background-size: contain;
padding: 18px;
width: 300px;
height: 300px;
}
#gauge {
height: 100%;
display: inline-block;
*display: inline;
zoom: 1;
}
</style>