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

<div id="gauge"></div>
<script>
    $("#gauge").kendoCircularGauge({
        value: 20,
        gaugeArea:{
            margin: 50
        }
    });
</script>

gaugeArea.margin.bottom

Number

The bottom margin of the gauge area.

<div id="gauge"></div>
<script>
$("#gauge").kendoCircularGauge({
    value: 50,
    gaugeArea: {
        margin: {
            top: 10,
            bottom: 40,
            left: 10,
            right: 10
        }
    }
});
</script>

gaugeArea.margin.left

Number

The left margin of the gauge area.

<div id="gauge"></div>
<script>
$("#gauge").kendoCircularGauge({
    value: 50,
    gaugeArea: {
        margin: {
            top: 10,
            bottom: 10,
            left: 35,
            right: 10
        }
    }
});
</script>

gaugeArea.margin.right

Number

The right margin of the gauge area.

<div id="gauge"></div>
<script>
$("#gauge").kendoCircularGauge({
    value: 50,
    gaugeArea: {
        margin: {
            top: 10,
            bottom: 10,
            left: 10,
            right: 25
        }
    }
});
</script>

gaugeArea.margin.top

Number

The top margin of the gauge area.

<div id="gauge"></div>
<script>
$("#gauge").kendoCircularGauge({
    value: 50,
    gaugeArea: {
        margin: {
            top: 30,
            bottom: 10,
            left: 10,
            right: 10
        }
    }
});
</script>