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").kendoArcGauge({
    value: 65,
    gaugeArea: {
        background: "#f0f0f0",
        border: {
            color: "#333",
            width: 2
        }
    }
});
</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").kendoArcGauge({
    value: 65,
    gaugeArea: {
        background: "#e8f5e8"
    }
});
</script>

gaugeArea.border

Object

The border of the gauge area.

<div id="gauge"></div>
<script>
$("#gauge").kendoArcGauge({
    value: 65,
    gaugeArea: {
        border: {
            color: "#0058e9",
            width: 3,
            dashType: "dash"
        }
    }
});
</script>

gaugeArea.height

Number

The height of the gauge area.

<div id="gauge"></div>
<script>
$("#gauge").kendoArcGauge({
    value: 65,
    gaugeArea: {
        height: 300
    }
});
</script>

gaugeArea.margin

Number|Object

The margin of the gauge area.

Default: 5

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

gaugeArea.width