pointer

Array

<div id="gauge"></div>
<script>
  $("#gauge").kendoLinearGauge({
    pointer: {
      value: 40
    }
  });
</script>

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

pointer.border

Object

The border of the pointer.

<div id="gauge"></div>
<script>
$("#gauge").kendoLinearGauge({
    pointer: {
        value: 25,
        border: {
            color: "#e91e63",
            width: 2,
            dashType: "solid"
        }
    },
    scale: {
        min: 0,
        max: 50
    }
});
</script>

pointer.color

String

The color of the pointer.

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

pointer.margin

Number|Object

The margin of the pointer.

Default: 3

js

// sets the top, right, bottom and left margin to 3px.
margin: 3

// sets the top and left margin to 1px
// margin right and bottom are with 5px (by default)
margin: { top: 1, left: 1 }

pointer.opacity

Number

The opacity of the pointer.

Default: 1

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

pointer.shape

String

The shape of the pointer.

"barIndicator"

Specifies a filling bar indicator.

"arrow"

Specifies a arrow shape.

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

pointer.size

Number

The size of the pointer.

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

pointer.track

Object

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

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

pointer.value

Number

The value of the gauge.

<div id="gauge"></div>
<script>
$("#gauge").kendoLinearGauge({
    pointer: {
        value: 35,
        color: "#3f51b5"
    },
    scale: {
        min: 0,
        max: 50
    }
});
</script>

Related Members