Scales

• Nov 28, 2023
• 2 minutes to read

This topic describes how to specify radial gauge scale options, and create a multi-scale gauge.

Specify Scale Layout

The position of a scale depends on the following properties:

StartAngle

The clockwise rotation angle that defines the scale start position, in degrees. The following image shows a gauge with different starting angles (the sweep angle is 240 degrees).

SweepAngle

Specifies the sweep angle of a scale, clockwise in degrees. The following image shows a gauge with different sweep angles (the starting angle is 0):

The following figure shows how StartAngle and SweepAngle affect the scale:

XAML

<dxg:RadialGauge>
    <dxg:RadialScale StartAngle="135"
                     SweepAngle="270"/>
</dxg:RadialGauge>

Specify Scale Display Values

RadialScale.StartValue and RadialScale.EndValue properties allow to set the minimum and maximum scale values to constrain display values on the scale:

XAML

<dxg:RadialGauge>
    <dxg:RadialScale StartValue="-50"
                     EndValue="50"
                     StartAngle="-150"
                     SweepAngle="120"/>
</dxg:RadialGauge>

The scale step depends on the number of tickmarks. For instructions on how to specify the number of tickmarks, refer to the following section: Add Tickmarks and Configure Their Appearance

Create a Gauge with Multiple Scales

Add multiple scales to a RadialGauge to create a composite gauge. The gauge shows the first added scale on the outside. To change the gap between scales, specify the inner scale’s Offset property.

XAML

<dxga:RadialGauge>
    <dxga:RadialScale StartValue="0" EndValue="180"
                      StartAngle="-180" SweepAngle="180"
                      ShowLastTickmark="True" ShowTickmarkLabels="True"
                      MajorTickmarkCount="7" MinorTickmarkCount="2"
                      TickmarkLabelPosition="Outside" TickmarkLabelFormat="f0">
        <dxga:MarkerIndicator Value="45"/>
    </dxga:RadialScale>
    <dxga:RadialScale StartValue="0" EndValue="60" 
                      MajorTickmarkCount="7" ShowTickmarkLabels="True" 
                      TickmarkLabelPosition="Inside" TickmarkLabelFormat="f0"
                      Offset="10">
        <dxga:NeedleIndicator Value="40"/>
    </dxga:RadialScale>
</dxga:RadialGauge>

Custom Draw Scales

You can handle the RadialScale.CustomDraw event to draw a scale based on a predefined type.

Next Steps

Visual Indicators

Learn how to add different indicators to a gauge scale: markers, needles and ranges.

Tickmarks

Learn how to show major and minor tickmarks with text labels on a scale.