Skip to main content

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:

This example uses the ASPxGaugeControl.AddGauge method to create a circular gauge. The CircularGauge.AddDefaultElements method adds the default elements (a scale, background layer, needle and spindle cap) to the circular gauge. The example also illustrates how to customize the gauge elements.


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() {
    // Create a new instance of the ASPxGaugeControl class with default settings.
    ASPxGaugeControl gaugeControl = new ASPxGaugeControl();

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

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

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

    // Customize 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);

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

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