gaugeArea: Object
The gauge area configuration options. This is the entire visible area of the gauge.
background: Object(default: "white")
The background of the gauge area. Any valid CSS color string will work here, including hex and rgb.
border: Object
The border of the gauge area.
color: String(default: "black")
The color of the border. Any valid CSS color string will work here, including hex and rgb.
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.
width: Number(default: 0)
The width of the border.
height: Number(default: vertical gauge is 200px; horizontal gauge is 60px)
The height of the gauge area.
margin: Number|Object(default: 5)
The margin of the gauge area.

Example

// sets the top, right, bottom and left margin to 3px.
margin: 3

// sets the top and left margin to 1px
// margin right and bottom are with 5px (by default)
margin: { top: 1, left: 1 }
width: Number(default: vertical gauge is 60px; horizontal gauge is 200px)
The width of the gauge area.
pointer: Object
The pointer configuration options.
cap: Object
The cap configuration options.
color: String
The color of the cap. Any valid CSS color string will work here, including hex and rgb.
size: Number
The size of the cap in percents. (from 0 to 1)
color: String
The color of the pointer. Any valid CSS color string will work here, including hex and rgb.
value: Number
The value of the gauge.
rangeSize: Number
The width of the range indicators.
scale: Object
Configures the scale.
endAngle: number(default: 210)
The end angle of the gauge. The gauge is rendered clockwise(0 degrees are the 180 degrees in the polar coordinat system)
labels: Object
Configures the scale labels.
background: String
The background color of the labels. Any valid CSS color string will work here, including hex and rgb
border: Object
The border of the labels.
color: String(default: "black")
The color of the border. Any valid CSS color string will work here, including hex and rgb.
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.
width: Number(default: 0)
The width of the border.
color: String
The text color of the labels. Any valid CSS color string will work here, including hex and rgb.
font: String(default: "12px Arial,Helvetica,sans-serif")
The font style of the labels.
format: String
The format of the labels.

Example

$("#radial-gauge").kendoRadialGauge({
    scale: {
       labels: {
           // set the format to currency
           format: "C"
       }
    }
});
margin: Number|Object(default: 0)
The margin of the labels.
padding: Number | Object(default: 0)
The padding of the labels.
position: String(default: "inside")
The labels positions.
"inside"
The labels are positioned inside.
"outside"
The labels are positioned outside.
template: String/Function
The label template. Template variables:
  • value - the value

Example

// chart intialization
$("#radial-gauge").kendoRadialGauge({
     scale: {
         labels: {
             // labels template
             template: "#= value #%"
         }
     }
});
visible: Boolean(default: true)
The visibility of the labels.
majorTicks: Object
Configures the scale major ticks.
color: String
The color of the major ticks.
size: Number
The major tick size. This is the length of the line in pixels that is drawn to indicate the tick on the scale.
visible: Boolean(default: true)
The visibility of the major ticks. Any valid CSS color string will work here, including hex and rgb.
width: Number(default: 0.5)
The width of the major ticks.
majorUnit: Number
The interval between major divisions.
max: Number(default: 100)
The maximum value of the scale.
min: Number(default: 0)
The minimum value of the scale.
minorTicks: Object
Configures the scale minor ticks.
color: String
The color of the minor ticks. Any valid CSS color string will work here, including hex and rgb.
size: Number
The minor tick size. This is the length of the line in pixels that is drawn to indicate the tick on the scale.
visible: Boolean(default: true)
The visibility of the minor ticks.
width: Number(default: 0.5)
The width of the minor ticks.
minorUnit: Number
The interval between minor divisions.
ranges: Array
The ranges of the scale. The range fields:
"from"
The start position of the range in scale units.
"to"
The end position of the range in scale units.
"color"
The color of the range. Any valid CSS color string will work here, including hex and rgb.

Example

$("#radial-gauge").kendoRadialGauge({
    scale: {
        ranges: [{
            from: 10,
            to: 20,
            color: "green"
        }]
    }
 });
reverse: Boolean(default: false)
Reverses the scale direction - values are increase anticlockwise.
startAngle: number(default: -30)
The start angle of the gauge. The gauge is rendered clockwise(0 degrees are the 180 degrees in the polar coordinat system)
transitions: Boolean(default: true)
A value indicating if transition animations should be played.