scale

Object

<div id="gauge"></div>
<script>
$("#gauge").kendoArcGauge({
    value: 65,
    scale: {
        min: 0,
        max: 100,
        startAngle: -90,
        endAngle: 90,
        majorTicks: {
            color: "#333"
        }
    }
});
</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: 180

<div id="gauge"></div>
<script>
$("#gauge").kendoArcGauge({
    value: 65,
    scale: {
        endAngle: 270
    }
});
</script>

scale.labels

Object

Configures the scale labels.

<div id="gauge"></div>
<script>
$("#gauge").kendoArcGauge({
    value: 65,
    scale: {
        labels: {
            color: "#0058e9",
            font: "14px Arial",
            background: "#f0f0f0"
        }
    }
});
</script>

scale.majorTicks

Object

Configures the scale major ticks.

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

scale.majorUnit

Number

The interval between major divisions.

<div id="gauge"></div>
<script>
$("#gauge").kendoArcGauge({
    value: 65,
    scale: {
        majorUnit: 20,
        majorTicks: {
            visible: true
        }
    }
});
</script>

scale.max

Number

The maximum value of the scale.

Default: 100

<div id="gauge"></div>
<script>
$("#gauge").kendoArcGauge({
    value: 65,
    scale: {
        max: 200
    }
});
</script>

scale.min

Number

The minimum value of the scale.

Default: 0

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

scale.minorTicks

Object

Configures the scale minor ticks.

<div id="gauge"></div>
<script>
$("#gauge").kendoArcGauge({
    value: 65,
    scale: {
        minorTicks: {
            color: "#999",
            size: 5,
            visible: true
        }
    }
});
</script>

scale.minorUnit

Number

The interval between minor divisions.

<div id="gauge"></div>
<script>
$("#gauge").kendoArcGauge({
    value: 65,
    scale: {
        minorUnit: 5,
        minorTicks: {
            visible: true
        }
    }
});
</script>

scale.rangeDistance

Number

The distance from the range indicators to the ticks.

<div id="gauge"></div>
<script>
$("#gauge").kendoArcGauge({
    value: 65,
    scale: {
        rangeDistance: 5
    }
});
</script>

scale.rangeLineCap

String

The lineCap style of the ranges.

Default: "round"

<div id="gauge"></div>
<script>
$("#gauge").kendoArcGauge({
    value: 65,
    scale: {
        rangeLineCap: "butt"
    }
});
</script>

The supported values are:

"butt"
"round"
"square"

scale.rangePlaceholderColor

String

The default color for the ranges.

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

scale.rangeSize

Number

The width of the range indicators.

<div id="gauge"></div>
<script>
$("#gauge").kendoArcGauge({
    value: 65,
    scale: {
        rangeSize: 10
    }
});
</script>

scale.reverse

Boolean

Reverses the scale direction - values are increase anticlockwise.

Default: false

<div id="gauge"></div>
<script>
$("#gauge").kendoArcGauge({
    value: 65,
    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").kendoArcGauge({
    value: 65,
    scale: {
        startAngle: -90
    }
});
</script>

Related Members