How to: Create a Circular Gauge

  • 3 minutes to read

This example shows how to create a circular gauge in code. The image below shows the result:

In the example, a circular gauge is created using the ASPxGaugeControl.AddGauge method. The default elements (a scale, background layer, needle and spindle cap) are added to the circular gauge via the CircularGauge.AddDefaultElements method. Then, some of them are customized in a specific manner.


using System.Drawing;
using DevExpress.Web.ASPxGauges;
using DevExpress.Web.ASPxGauges.Base;
using DevExpress.XtraGauges.Core.Drawing;
using DevExpress.XtraGauges.Core.Model;
using DevExpress.XtraGauges.Core.Base;
using DevExpress.Web.ASPxGauges.Gauges.Circular;
using DevExpress.XtraGauges.Base;

protected void Page_Load(object sender, EventArgs e) {
    if (!IsPostBack)

private void CreateCircularGauge() {
    // Creates a new instance of the ASPxGaugeControl class with default settings.
    ASPxGaugeControl gaugeControl = new ASPxGaugeControl();

    // Creates a new instance of the CircularGauge class and adds it
    // to the gauge control's Gauges collection.
    CircularGauge circularGauge = (CircularGauge)gaugeControl.AddGauge(GaugeType.Circular);

    // Adds the default elements (a scale, background layer, needle and spindle cap).

    // Changes the background layer's paint style.
    ArcScaleBackgroundLayer background = circularGauge.BackgroundLayers[0];
    background.ShapeType = BackgroundLayerShapeType.CircularFull_Style2;

    // Customizes the scale's settings.
    ArcScaleComponent scale = circularGauge.Scales[0];
    scale.MinValue = 0;
    scale.MaxValue = 100;
    scale.Value = 25;
    scale.MajorTickCount = 6;
    scale.MajorTickmark.FormatString = "{0:F0}";
    scale.MajorTickmark.ShapeType = TickmarkShapeType.Circular_Style1_2;
    scale.MajorTickmark.ShapeOffset = -9;
    scale.MajorTickmark.AllowTickOverlap = true;
    scale.MinorTickCount = 3;
    scale.MinorTickmark.ShapeType = TickmarkShapeType.Circular_Style2_1;
    scale.AppearanceTickmarkText.TextBrush = new SolidBrushObject(Color.Gray);

    // Changes the needle's paint style.
    ArcScaleNeedleComponent needle = circularGauge.Needles[0];
    needle.ShapeType = NeedleShapeType.CircularFull_Style3;

    // Adds the gauge control to the Page.
    gaugeControl.Width = 250;
    gaugeControl.Height = 250;
    gaugeControl.AutoLayout = true;