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.
border: Object
The border of the pointer.
color: String
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: 1)
The width of the border.
color: String
The color of the pointer.
margin: Number|Object(default: 3)
The margin of the pointer.

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 }
opacity: Number(default: 1)
The opacity of the pointer. Any valid CSS color string will work here, including hex and rgb.
shape: String
The shape of the pointer.
"barIndicator"
Specifies a filling bar indicator.
"arrow"
Specifies a arrow shape.
size: Number
The size of the pointer.
track: Object
The element arround/under the pointer. (available only for 'barIndicator' shape)
border: Object
The border of the track.
color: String
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: 1)
The width of the border.
color: String
The color of the track.
opacity: Number
The opacity of the track.
size: Number
The size of the track.
visible: Boolean(default: false)
The visibility of the track.
value: Number
The value of the gauge.
scale: Object
Configures the scale.
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").kendoLinearGauge({
    scale: {
       labels: {
           // set the format to currency
           format: "C"
       }
    }
});
margin: Number|Object(default: 5)
The margin of the labels.

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 }
padding: Number | Object(default: 0)
The padding of the labels.
template: String/Function
The label template. Template variables:
  • value - the value

Example

// chart intialization
$("#radial-gauge").kendoLinearGauge({
     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. Any valid CSS color string will work here, including hex and rgb.
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.
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.
mirror: Boolean
Mirrors the scale labels and ticks. If the labels are normally on the left side of the scale, mirroring the scale will render them to the right.
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

$("#linear-gauge").kendoLinearGauge({
    scale: {
        ranges: [{
            from: 10,
            to: 20,
            color: "green"
        }]
    }
 });
reverse: Boolean(default: false)
Reverses the axis direction - values increase from right to left and from top to bottom.
vertical: Boolean
The position of the gauge.
transitions: Boolean(default: true)
A value indicating if transition animations should be played.