scale

Object

<div id="gauge"></div>
<script>
$("#gauge").kendoRadialGauge({
    pointer: [{
        value: 40
    }],
    scale: {
        min: 0,
        max: 100,
        startAngle: -45,
        endAngle: 225,
        majorUnit: 20,
        minorUnit: 5
    }
});
</script>

scale.endAngle

Number

The end angle of the gauge. The gauge is rendered clockwise(0 degrees are the 180 degrees in the polar coordinate system)

Default: 210

<div id="gauge"></div>
<script>
$("#gauge").kendoRadialGauge({
    pointer: [{
        value: 70
    }],
    scale: {
        endAngle: 180
    }
});
</script>

scale.labels

Object

Configures the scale labels.

<div id="gauge"></div>
<script>
$("#gauge").kendoRadialGauge({
    pointer: [{
        value: 25
    }],
    scale: {
        labels: {
            color: "#333333",
            font: "14px Arial",
            visible: true,
            position: "outside"
        }
    }
});
</script>

scale.majorTicks

Object

Configures the scale major ticks.

<div id="gauge"></div>
<script>
$("#gauge").kendoRadialGauge({
    pointer: [{
        value: 70
    }],
    scale: {
        majorTicks: {
            color: "#ff0000",
            size: 10,
            width: 2,
            visible: true
        }
    }
});
</script>

scale.majorUnit

Number

The interval between major divisions.

<div id="gauge"></div>
<script>
$("#gauge").kendoRadialGauge({
    pointer: [{
        value: 75
    }],
    scale: {
        min: 0,
        max: 100,
        majorUnit: 25
    }
});
</script>

scale.max

Number

The maximum value of the scale.

Default: 100

<div id="gauge"></div>
<script>
$("#gauge").kendoRadialGauge({
    pointer: [{
        value: 180
    }],
    scale: {
        max: 200
    }
});
</script>

scale.min

Number

The minimum value of the scale.

Default: 0

<div id="gauge"></div>
<script>
$("#gauge").kendoRadialGauge({
    pointer: [{
        value: 40
    }],
    scale: {
        min: 20,
        max: 100
    }
});
</script>

scale.minorTicks

Object

Configures the scale minor ticks.

<div id="gauge"></div>
<script>
$("#gauge").kendoRadialGauge({
    pointer: [{
        value: 55
    }],
    scale: {
        minorTicks: {
            color: "#0066cc",
            size: 5,
            width: 1,
            visible: true
        }
    }
});
</script>

scale.minorUnit

Number

The interval between minor divisions.

<div id="gauge"></div>
<script>
$("#gauge").kendoRadialGauge({
    pointer: [{
        value: 35
    }],
    scale: {
        majorUnit: 20,
        minorUnit: 5
    }
});
</script>

scale.rangeDistance

Number

The distance from the range indicators to the ticks.

<div id="gauge"></div>
<script>
  $("#gauge").kendoRadialGauge({
    pointer: {
      value: 50
    },
    scale: {
      ranges: [{
        from: 10,
        to: 20,
        color: "green"
      }],
      rangeDistance: 10
    }
  });
</script>

scale.rangePlaceholderColor

String

The default color for the ranges.

<div id="gauge"></div>
<script>
$("#gauge").kendoRadialGauge({
    pointer: [{
        value: 70
    }],
    scale: {
        rangePlaceholderColor: "#cccccc",
        ranges: [{
            from: 0,
            to: 50,
            color: "blue"
        }]
    }
});
</script>

scale.rangeSize

Number

The width of the range indicators.

<div id="gauge"></div>
<script>
  $("#gauge").kendoRadialGauge({
    pointer: {
      value: 50
    },
    scale: {
      ranges: [{
        from: 10,
        to: 20,
        color: "green"
      }],   
      rangeSize: 20
    }
  });
</script>

scale.ranges

Array

The ranges of the scale.

<div id="gauge"></div>
<script>
$("#gauge").kendoRadialGauge({
    renderAs: "canvas",
    pointer: {
    value: 50
    },
    scale: {
    min: 0,
    max: 100,
    ranges: [{
        from: 10,
        to: 20,
        color: "green"
    }]
    }
});
</script>

scale.reverse

Boolean

Reverses the scale direction - values are increase anticlockwise.

Default: false

<div id="gauge"></div>
<script>
$("#gauge").kendoRadialGauge({
    pointer: [{
        value: 60
    }],
    scale: {
        reverse: true
    }
});
</script>

scale.startAngle

Number

The start angle of the gauge. The gauge is rendered clockwise(0 degrees are the 180 degrees in the polar coordinate system)

Default: -30

<div id="gauge"></div>
<script>
$("#gauge").kendoRadialGauge({
    pointer: [{
        value: 40
    }],
    scale: {
        startAngle: 0
    }
});
</script>

Related Members