scale

Object

<div id="gauge"></div>
<script>
$("#gauge").kendoCircularGauge({
    value: 75,
    scale: {
        min: 0,
        max: 100,
        majorUnit: 20,
        minorUnit: 5
    }
});
</script>

scale.labels

Object

Configures the scale labels.

<div id="gauge"></div>
<script>
$("#gauge").kendoCircularGauge({
    value: 50,
    scale: {
        labels: {
            visible: true,
            color: "#0058e9",
            font: "14px Arial"
        }
    }
});
</script>

scale.majorTicks

Object

Configures the scale major ticks.

<div id="gauge"></div>
<script>
$("#gauge").kendoCircularGauge({
    value: 50,
    scale: {
        majorTicks: {
            visible: true,
            color: "#0058e9",
            size: 10
        }
    }
});
</script>

scale.majorUnit

Number

The interval between major divisions.

<div id="gauge"></div>
<script>
$("#gauge").kendoCircularGauge({
    value: 50,
    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").kendoCircularGauge({
    value: 50,
    scale: {
        max: 200
    }
});
</script>

scale.min

Number

The minimum value of the scale.

Default: 0

<div id="gauge"></div>
<script>
$("#gauge").kendoCircularGauge({
    value: 50,
    scale: {
        min: -10,
        max: 100
    }
});
</script>

scale.minorTicks

Object

Configures the scale minor ticks.

<div id="gauge"></div>
<script>
$("#gauge").kendoCircularGauge({
    value: 50,
    scale: {
        minorTicks: {
            visible: true,
            color: "#0058e9",
            size: 5
        }
    }
});
</script>

scale.minorUnit

Number

The interval between minor divisions.

<div id="gauge"></div>
<script>
$("#gauge").kendoCircularGauge({
    value: 50,
    scale: {
        min: 0,
        max: 100,
        minorUnit: 2.5
    }
});
</script>

scale.rangeDistance

Number

The distance from the range indicators to the ticks.

<div id="gauge"></div>
<script>
$("#gauge").kendoCircularGauge({
    value: 50,
    scale: {
        rangeDistance: 10
    }
});
</script>

scale.rangePlaceholderColor

String

The default color for the ranges.

<div id="gauge"></div>
<script>
$("#gauge").kendoCircularGauge({
    value: 50,
    scale: {
        rangePlaceholderColor: "#e0e0e0"
    }
});
</script>

scale.rangeSize

Number

The width of the range indicators.

<div id="gauge"></div>
<script>
$("#gauge").kendoCircularGauge({
    value: 50,
    scale: {
        rangeSize: 20
    }
});
</script>

scale.reverse

Boolean

Reverses the scale direction - values are increase anticlockwise.

Default: false

<div id="gauge"></div>
<script>
$("#gauge").kendoCircularGauge({
    value: 50,
    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: 0

<div id="gauge"></div>
<script>
$("#gauge").kendoCircularGauge({
    value: 50,
    scale: {
        startAngle: 45
    }
});
</script>

Related Members