Scales

• Jul 03, 2024
• 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

<dx:RadialGauge>
    <dx:RadialScale StartAngle="135"
                    SweepAngle="270"/>
</dx: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

<dx:RadialGauge>
    <dx:RadialScale StartValue="-50"
                    EndValue="50"
                    StartAngle="-150"
                    SweepAngle="120"/>
</dx: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

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