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

GaugeArea

configuration

The gauge area configuration options. This is the entire visible area of the gauge.

gaugeArea

Object

<div id="gauge"></div>
<script>
$("#gauge").kendoRadialGauge({
    gaugeArea: {
        background: "#eeeeee",
        width: 300,
        height: 300,
        margin: 10
    },
    pointer: [{
        value: 65
    }]
});
</script>

gaugeArea.background

String

The background of the gauge area. Any valid CSS color string will work here, including hex and rgb.

Default: "white"

<div id="gauge"></div>
<script>
$("#gauge").kendoRadialGauge({
    gaugeArea: {
        background: "#f0f0f0"
    },
    pointer: [{
        value: 50
    }]
});
</script>

gaugeArea.border

Object

The border of the gauge area.

<div id="gauge"></div>
<script>
$("#gauge").kendoRadialGauge({
    gaugeArea: {
        border: {
            color: "#cccccc",
            width: 2,
            dashType: "dash"
        }
    },
    pointer: [{
        value: 75
    }]
});
</script>

gaugeArea.height

Number

The height of the gauge area. By default, the vertical gauge is 200px and the horizontal one is 60px.

<div id="gauge"></div>
<script>
$("#gauge").kendoRadialGauge({
    gaugeArea: {
        height: 400
    },
    pointer: [{
        value: 30
    }]
});
</script>

gaugeArea.margin

Number|Object

The margin of the gauge area.

Default: 5

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

gaugeArea.width