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.
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: 200; horizontal gauge: 60)
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: 60; horizontal gauge: 200)
The width of the gauge area.
plotArea: Object
The plot area configuration options.
background: Object
The background of the gauge area.
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.
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.
width: Number(default: 1)
The width of the border.
color: String
The color 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 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.
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.
size: Number
The size of the track of the pointer.
value: String
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: "{0:C}"
       }
    }
});
margin: Number|Object(default: 0)
The margin of the labels.
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.
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 axis.
min: Number(default: 0)
The minimum value of the axis.
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.
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

$("#linear-gauge").kendoLinearGauge({
    scale: {
        ranges: [{
            from: 10,
            to: 20,
            color: "green"
        }]
    }
 });
transitions: Boolean(default: true)
A value indicating if transition animations should be played.