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

GaugeArea.margin

configuration

The margin of the gauge area.

gaugeArea.margin

Number|Object

Default: 5

// 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 }

gaugeArea.margin.bottom

Number

The bottom margin of the gauge area.

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

gaugeArea.margin.left

Number

The left margin of the gauge area.

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

gaugeArea.margin.right

Number

The right margin of the gauge area.

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

gaugeArea.margin.top

Number

The top margin of the gauge area.

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