New to Kendo UI for jQuery? Start a free 30-day trial

Pointer.track

configuration

The element arround/under the pointer. (available only for 'barIndicator' shape)

pointer.track

Object

<div id="gauge"></div>
<script>
$("#gauge").kendoLinearGauge({
    pointer: {
        value: 25,
        shape: "barIndicator",
        track: {
            color: "#e0e0e0",
            size: 5
        }
    },
    scale: {
        min: 0,
        max: 50
    }
});
</script>

pointer.track.border

Object

The border of the track.

<div id="gauge"></div>
<script>
$("#gauge").kendoLinearGauge({
    pointer: {
        value: 25,
        shape: "barIndicator",
        track: {
            color: "#f5f5f5",
            border: {
                color: "#9e9e9e",
                width: 1,
                dashType: "solid"
            }
        }
    },
    scale: {
        min: 0,
        max: 50
    }
});
</script>

pointer.track.color

String

The color of the track.

<div id="gauge"></div>
<script>
$("#gauge").kendoLinearGauge({
    pointer: {
        value: 25,
        shape: "barIndicator",
        track: {
            color: "#e3f2fd"
        }
    },
    scale: {
        min: 0,
        max: 50
    }
});
</script>

pointer.track.opacity

Number

The opacity of the track.

<div id="gauge"></div>
<script>
$("#gauge").kendoLinearGauge({
    pointer: {
        value: 25,
        shape: "barIndicator",
        track: {
            color: "#ffeb3b",
            opacity: 0.5
        }
    },
    scale: {
        min: 0,
        max: 50
    }
});
</script>

pointer.track.size

Number

The size of the track.

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

pointer.track.visible

Boolean

The visibility of the track.

Default: false

<div id="gauge"></div>
<script>
$("#gauge").kendoLinearGauge({
    pointer: {
        value: 25,
        shape: "barIndicator",
        track: {
            color: "#f3e5f5",
            visible: true
        }
    },
    scale: {
        min: 0,
        max: 50
    }
});
</script>