[Expand]General Information
[Collapse]WinForms Controls
 [Expand]What's Installed
 [Expand]Build an Application
 [Collapse]Controls and Libraries
  [Expand]Forms and User Controls
  [Expand]Messages, Notifications, and Dialogs
  [Expand]Editors and Simple Controls
  [Expand]Ribbon, Bars and Menu
  [Expand]Application UI Manager
  [Expand]Docking Library
  [Expand]Data Grid
  [Expand]Vertical Grid
  [Expand]Property Grid
  [Expand]Pivot Grid
  [Expand]Tree List
  [Expand]Chart Control
   [Expand]Getting Started
    [Collapse]Gauge Types
      Circular Gauges
      Linear Gauges
      Digital Gauges
      State Indicator Gauges
    [Expand]Visual Elements
    [Expand]Appearance Customization
     Coordinate System
     Data Binding
     Saving and Restoring Gauge Layout and Style Settings
   [Expand]Design-Time Features
   [Expand]Product Information
  [Expand]Map Control
  [Expand]Rich Text Editor
  [Expand]Spell Checker
  [Expand]Form Layout Managers
  [Expand]Navigation Controls
  [Expand]PDF Viewer
  [Expand]TreeMap Control
  [Expand]Sunburst Control
 [Expand]Common Features
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Report and Dashboard Server
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

Circular Gauges

This document gives the detailed information on the Circular Gauge types shipped with the XtraGauges Suite, as well as detailing how they should be used in your application.

For details on other gauge types, refer to the corresponding topics of the Gauge Types section.

Expanded Circular Gauges Overview

Circular Gauge is a component that represents element's values by visualizing them on a circular scale.

This control is appropriate for creating speedometers, tachometers, stopwatches, clocks, etc.

Circular Gauges all have Scales in form of arcs. These gauges can be used separately in your application or together with other gauge types.

The following is the list of circular gauge shape types:

  • full circular;
  • half-circular;
  • quarter-circular;
  • three-fourth circular;
  • wide circular.

The images below show some of these gauge types:

You can access these shapes in the gauge Preset Manager.

Expanded CircularGauge Class

Circular Gauge is represented by an instance of the CircularGauge class. This object can be accessed as an item of the GaugeCollection object returned by the GaugeControlBase.Gauges property of the GaugeControl object.

See the following code:

You can create a Circular Gauge control either at design time within Visual Studio or programmatically at runtime. The following examples demonstrate how it can be done:

Expanded Circular Gauge Elements

This section provides a brief overview of base gauge elements, as well as lists their main properties.

A Circular Gauge comprises numerous elements each of which is intended to perform a specific task.

The following image demonstrates a Circular Gauge containing a full set of its elements.

The first base element of a circular gauge is a scale. Typically, a circular gauge can display the unlimited number of scales with tickmarks, ranges and labels.

A scale is represented by the ArcScale class.

To customize a gauge scale in your application, you need to specify the following properties:

After customizing a gauge scale, you may need to specify the gauge appearance. You can do it by adding a background layer to a scale.

This layer specifies the background of the gauge. It is represented by the ArcScaleBackgroundLayer class.

The following is the list of the background layer main properties:

Other gauge elements (needles, range bars, markers) are linked to a particular scale and rendered relative to this scale object.

For instance, a needle, linked to a specific scale, indicates the scale's current value by spinning around the scale's center (by default, the center of the gauge).

A needle is represented by the ArcScaleNeedleComponent class. It provides the following main properties:

For more information on gauge elements, see the Visual Elements section.

Is this topic helpful?​​​​​​​