scale

Object

<div id="gauge"></div>
<script>
$("#gauge").kendoLinearGauge({
    pointer: {
        value: 30
    },
    scale: {
        min: 0,
        max: 100,
        majorUnit: 20,
        minorUnit: 5,
        vertical: true,
        reverse: false
    }
});
</script>

scale.labels

Object

Configures the scale labels.

<div id="gauge"></div>
<script>
$("#gauge").kendoLinearGauge({
    pointer: {
        value: 30
    },
    scale: {
        min: 0,
        max: 50,
        labels: {
            color: "#2196f3",
            font: "12px Arial",
            visible: true
        }
    }
});
</script>

scale.line

Object

Configures the axis line.

<div id="gauge"></div>
<script>
$("#gauge").kendoLinearGauge({
    pointer: {
        value: 30
    },
    scale: {
        min: 0,
        max: 50,
        line: {
            color: "#2196f3",
            width: 2,
            visible: true
        }
    }
});
</script>

scale.majorTicks

Object

Configures the scale major ticks.

<div id="gauge"></div>
<script>
$("#gauge").kendoLinearGauge({
    pointer: {
        value: 30
    },
    scale: {
        min: 0,
        max: 50,
        majorTicks: {
            color: "#2196f3",
            size: 10,
            width: 2,
            visible: true
        }
    }
});
</script>

scale.majorUnit

Number

The interval between major divisions.

<div id="gauge"></div>
<script>
$("#gauge").kendoLinearGauge({
    pointer: {
        value: 30
    },
    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").kendoLinearGauge({
    pointer: {
        value: 75
    },
    scale: {
        min: 0,
        max: 80
    }
});
</script>

scale.min

Number

The minimum value of the scale.

Default: 0

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

scale.minorTicks

Object

Configures the scale minor ticks.

<div id="gauge"></div>
<script>
$("#gauge").kendoLinearGauge({
    pointer: {
        value: 30
    },
    scale: {
        min: 0,
        max: 50,
        minorTicks: {
            color: "#9e9e9e",
            size: 5,
            width: 1,
            visible: true
        }
    }
});
</script>

scale.minorUnit

Number

The interval between minor divisions.

<div id="gauge"></div>
<script>
$("#gauge").kendoLinearGauge({
    pointer: {
        value: 30
    },
    scale: {
        min: 0,
        max: 50,
        majorUnit: 10,
        minorUnit: 2
    }
});
</script>

scale.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.

<div id="gauge"></div>
<script>
$("#gauge").kendoLinearGauge({
    pointer: {
        value: 30
    },
    scale: {
        min: 0,
        max: 50,
        mirror: true,
        vertical: true
    }
});
</script>

scale.rangePlaceholderColor

String

The default color for the ranges.

<div id="gauge"></div>
<script>
$("#gauge").kendoLinearGauge({
    pointer: {
        value: 30
    },
    scale: {
        min: 0,
        max: 50,
        ranges: [{
            from: 10,
            to: 20,
            color: "#2196f3"
        }],
        rangePlaceholderColor: "#e0e0e0"
    }
});
</script>

scale.rangeSize

Number

The width of the range indicators.

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

scale.ranges

Array

The ranges of the scale.

<div id="linear-gauge"></div>
<script>
    $("#linear-gauge").kendoLinearGauge({
      scale: {
        ranges: [{
          from: 10,
          to: 20,
          color: "green"
        }]
      }
    });
</script>

scale.reverse

Boolean

Reverses the axis direction - values increase from right to left and from top to bottom.

Default: false

<div id="gauge"></div>
<script>
$("#gauge").kendoLinearGauge({
    pointer: {
        value: 30
    },
    scale: {
        min: 0,
        max: 50,
        reverse: true
    }
});
</script>

scale.vertical

Boolean

The position of the gauge.

<div id="gauge"></div>
<script>
$("#gauge").kendoLinearGauge({
    pointer: {
        value: 30
    },
    scale: {
        min: 0,
        max: 50,
        vertical: false
    }
});
</script>

Related Members