Labels in UWP Radial Gauge (SfCircularGauge)

27 Oct 202220 minutes to read

The Scale labels associate numeric values with major scale tick marks.

Label stroke customization

The label color can be changed using the LabelStroke property.

XAML
C#
<gauge:SfCircularGauge>

    <gauge:SfCircularGauge.Scales>

    <gauge:CircularScale  Radius="150"

    RimStroke="#39B2C6" RimStrokeThickness="8"

    TickStroke="#BEBEBE" LabelStroke="DeepPink" SmallTickStroke="#BEBEBE">

    <gauge:CircularScale.Pointers>

    <gauge:CircularPointer NeedlePointerVisibility="Collapsed"/>

    </gauge:CircularScale.Pointers>

    </gauge:CircularScale>

    </gauge:SfCircularGauge.Scales>

    </gauge:SfCircularGauge>
SfCircularGauge sfCircularGauge = new SfCircularGauge();

CircularScale circularScale = new CircularScale();

circularScale.RimStrokeThickness = 8;

circularScale.Radius = 150;

circularScale.RimStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x57, 0xb2, 0xc6));

circularScale.TickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1));

circularScale.SmallTickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1));

circularScale.LabelStroke = new SolidColorBrush(Colors.DeepPink);

CircularPointer circularPointer = new CircularPointer();

circularPointer.NeedlePointerVisibility = Windows.UI.Xaml.Visibility.Collapsed;

circularScale.Pointers.Add(circularPointer);

sfCircularGauge.Scales.Add(circularScale);

Labels_img1

Label font customization

The label font can be customized using the FontSize, FontFamily, and FontStyle properties.

XAML
C#
<gauge:SfCircularGauge>

    <gauge:SfCircularGauge.Scales>

    <gauge:CircularScale  Radius="150" FontFamily="Monotype Corsiva" FontSize="20" 

    FontStyle="Italic"

    RimStroke="#39B2C6" RimStrokeThickness="8"

    TickStroke="#BEBEBE" LabelStroke="#9E9E9E" SmallTickStroke="#BEBEBE">

    <gauge:CircularScale.Pointers>

    <gauge:CircularPointer NeedlePointerVisibility="Collapsed"/>

    </gauge:CircularScale.Pointers>

    </gauge:CircularScale>

    </gauge:SfCircularGauge.Scales>

    </gauge:SfCircularGauge>
SfCircularGauge sfCircularGauge = new SfCircularGauge();

sfCircularGauge.FontSize = 20;

sfCircularGauge.FontFamily = new FontFamily("Monotype Corsiva");

sfCircularGauge.FontStyle = Windows.UI.Text.FontStyle.Italic;

CircularScale circularScale = new CircularScale();

circularScale.RimStrokeThickness = 8;

circularScale.Radius = 150;

circularScale.RimStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x57, 0xb2, 0xc6));

circularScale.TickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1));

circularScale.SmallTickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1));

circularScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x99, 0x99, 0x99));

CircularPointer circularPointer = new CircularPointer();

circularPointer.NeedlePointerVisibility = Windows.UI.Xaml.Visibility.Collapsed;

circularScale.Pointers.Add(circularPointer);

sfCircularGauge.Scales.Add(circularScale);

Labels_img2

Setting position for labels

The Labels can be placed inside the scale, outside the scale, or on the scale using the following two ways:

Placing the labels by selecting one of the options available in the LabelPosition property.

They are,

1.Inside (Default)

2.Outside

3.Custom

   <div class="tabs">
   
   <ul class="nav nav-tabs" role="tablist">
   
   <li role="presentation" class=""><a data-target="#37laftvvcnjmgq40dja12xbg09ohl9p2-xml" aria-controls="home" role="tab" data-toggle="tab" data-original-lang="xml">XAML</a></li>
   <li role="presentation" class=""><a data-target="#6fq7u7kqpuayz51a5y8csjuefapr9sqz-csharp" aria-controls="home" role="tab" data-toggle="tab" data-original-lang="csharp">C#</a></li>
   
   </ul>
   
   <div class="tab-content">
   
   
   
   <div role="tabpanel" class="tab-pane" id="37laftvvcnjmgq40dja12xbg09ohl9p2-xml" data-original-lang = "xml" ><div class="highlight"><pre><code class="language-xml" data-lang="xml"><span></span><span class="nt">&lt;gauge:SfCircularGauge&gt;</span>
   
       <span class="nt">&lt;gauge:SfCircularGauge.Scales&gt;</span>
   
       <span class="nt">&lt;gauge:CircularScale</span>  <span class="na">Radius=</span><span class="s">&quot;150&quot;</span> <span class="na">LabelPosition=</span><span class="s">&quot;Outside&quot;</span>
   
       <span class="na">RimStroke=</span><span class="s">&quot;#39B2C6&quot;</span> <span class="na">RimStrokeThickness=</span><span class="s">&quot;8&quot;</span>
   
       <span class="na">TickStroke=</span><span class="s">&quot;#BEBEBE&quot;</span> <span class="na">LabelStroke=</span><span class="s">&quot;#9E9E9E&quot;</span> <span class="na">SmallTickStroke=</span><span class="s">&quot;#BEBEBE&quot;</span><span class="nt">&gt;</span>
   
       <span class="nt">&lt;gauge:CircularScale.Pointers&gt;</span>
   
       <span class="nt">&lt;gauge:CircularPointer</span> <span class="na">NeedlePointerVisibility=</span><span class="s">&quot;Collapsed&quot;</span><span class="nt">/&gt;</span>
   
       <span class="nt">&lt;/gauge:CircularScale.Pointers&gt;</span>
   
       <span class="nt">&lt;/gauge:CircularScale&gt;</span>
   
       <span class="nt">&lt;/gauge:SfCircularGauge.Scales&gt;</span>
   
       <span class="nt">&lt;/gauge:SfCircularGauge&gt;</span></code></pre></div>
   </div>
   
   
   <div role="tabpanel" class="tab-pane" id="6fq7u7kqpuayz51a5y8csjuefapr9sqz-csharp" data-original-lang = "csharp" ><div class="highlight"><pre><code class="language-csharp" data-lang="csharp"><span></span><span class="n">SfCircularGauge</span> <span class="n">sfCircularGauge</span> <span class="p">=</span> <span class="k">new</span> <span class="n">SfCircularGauge</span><span class="p">();</span>
   
   <span class="n">CircularScale</span> <span class="n">circularScale</span> <span class="p">=</span> <span class="k">new</span> <span class="n">CircularScale</span><span class="p">();</span>
   
   <span class="n">circularScale</span><span class="p">.</span><span class="n">RimStrokeThickness</span> <span class="p">=</span> <span class="m">8</span><span class="p">;</span>
   
   <span class="n">circularScale</span><span class="p">.</span><span class="n">Radius</span> <span class="p">=</span> <span class="m">150</span><span class="p">;</span>
   
   <span class="n">circularScale</span><span class="p">.</span><span class="n">LabelPosition</span> <span class="p">=</span> <span class="n">LabelPosition</span><span class="p">.</span><span class="n">Outside</span><span class="p">;</span>
   
   <span class="n">circularScale</span><span class="p">.</span><span class="n">RimStroke</span> <span class="p">=</span> <span class="k">new</span> <span class="n">SolidColorBrush</span><span class="p">(</span><span class="n">Color</span><span class="p">.</span><span class="n">FromArgb</span><span class="p">(</span><span class="m">0</span><span class="n">xff</span><span class="p">,</span> <span class="m">0</span><span class="n">x57</span><span class="p">,</span> <span class="m">0</span><span class="n">xb2</span><span class="p">,</span> <span class="m">0</span><span class="n">xc6</span><span class="p">));</span>
   
   <span class="n">circularScale</span><span class="p">.</span><span class="n">TickStroke</span> <span class="p">=</span> <span class="k">new</span> <span class="n">SolidColorBrush</span><span class="p">(</span><span class="n">Color</span><span class="p">.</span><span class="n">FromArgb</span><span class="p">(</span><span class="m">0</span><span class="n">xff</span><span class="p">,</span> <span class="m">0</span><span class="n">xc1</span><span class="p">,</span> <span class="m">0</span><span class="n">xc1</span><span class="p">,</span> <span class="m">0</span><span class="n">xc1</span><span class="p">));</span>
   
   <span class="n">circularScale</span><span class="p">.</span><span class="n">SmallTickStroke</span> <span class="p">=</span> <span class="k">new</span> <span class="n">SolidColorBrush</span><span class="p">(</span><span class="n">Color</span><span class="p">.</span><span class="n">FromArgb</span><span class="p">(</span><span class="m">0</span><span class="n">xff</span><span class="p">,</span> <span class="m">0</span><span class="n">xc1</span><span class="p">,</span> <span class="m">0</span><span class="n">xc1</span><span class="p">,</span> <span class="m">0</span><span class="n">xc1</span><span class="p">));</span>
   
   <span class="n">circularScale</span><span class="p">.</span><span class="n">LabelStroke</span> <span class="p">=</span> <span class="k">new</span> <span class="n">SolidColorBrush</span><span class="p">(</span><span class="n">Color</span><span class="p">.</span><span class="n">FromArgb</span><span class="p">(</span><span class="m">0</span><span class="n">xff</span><span class="p">,</span> <span class="m">0</span><span class="n">x99</span><span class="p">,</span> <span class="m">0</span><span class="n">x99</span><span class="p">,</span> <span class="m">0</span><span class="n">x99</span><span class="p">));</span>
   
   <span class="n">CircularPointer</span> <span class="n">circularPointer</span> <span class="p">=</span> <span class="k">new</span> <span class="n">CircularPointer</span><span class="p">();</span>
   
   <span class="n">circularPointer</span><span class="p">.</span><span class="n">NeedlePointerVisibility</span> <span class="p">=</span> <span class="n">Windows</span><span class="p">.</span><span class="n">UI</span><span class="p">.</span><span class="n">Xaml</span><span class="p">.</span><span class="n">Visibility</span><span class="p">.</span><span class="n">Collapsed</span><span class="p">;</span>
   
   <span class="n">circularScale</span><span class="p">.</span><span class="n">Pointers</span><span class="p">.</span><span class="n">Add</span><span class="p">(</span><span class="n">circularPointer</span><span class="p">);</span>
   
   <span class="n">sfCircularGauge</span><span class="p">.</span><span class="n">Scales</span><span class="p">.</span><span class="n">Add</span><span class="p">(</span><span class="n">circularScale</span><span class="p">);</span></code></pre></div>
   </div>
   
   
   </div>
   
   </div>

Labels_img3

Positioning the labels far away from the ticks using the LabelOffset property. First, set the LabelPosition to custom, and then position the label using the LabelOffset property.

XAML
C#
<gauge:SfCircularGauge>
   
    <gauge:SfCircularGauge.Scales>
   
    <gauge:CircularScale  Radius="150" LabelPosition="Custom" LabelOffset="0.5" 
   
    RimStroke="#39B2C6" RimStrokeThickness="8"
   
    TickStroke="#BEBEBE" LabelStroke="#9E9E9E" SmallTickStroke="#BEBEBE">
   
    <gauge:CircularScale.Pointers>
   
    <gauge:CircularPointer NeedlePointerVisibility="Collapsed"/>
   
    </gauge:CircularScale.Pointers>
   
    </gauge:CircularScale>
   
    </gauge:SfCircularGauge.Scales>
   
    </gauge:SfCircularGauge>
SfCircularGauge sfCircularGauge = new SfCircularGauge();
   
CircularScale circularScale = new CircularScale();
   
circularScale.RimStrokeThickness = 8;
   
circularScale.Radius = 150;
   
circularScale.LabelPosition = LabelPosition.Custom;
   
circularScale.LabelOffset = 0.5;
   
circularScale.RimStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x57, 0xb2, 0xc6));
   
circularScale.TickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1));
   
circularScale.SmallTickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1));
   
circularScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x99, 0x99, 0x99));
   
CircularPointer circularPointer = new CircularPointer();
   
circularPointer.NeedlePointerVisibility = Windows.UI.Xaml.Visibility.Collapsed;
   
circularScale.Pointers.Add(circularPointer);
   
sfCircularGauge.Scales.Add(circularScale);

Labels_img4

Setting smart labels

Smart labels allow to change the numeric scale type of the labels displayed in a gauge scale and customize the labels by adding prefixes or suffixes to the scale labels.

Enable/disable smart labels

The EnableSmartLabels property is a Boolean property that enables or disables the smart label feature of the circular gauge.

Setting numeric scale type

The NumericScaleType property allows to set the type of label. The following types can be applied to labels:

•Auto

•Thousands

•Millions

•Billions

•Trillions

•Quadrillions

•Quintillions

XAML
C#
<gauge:SfCircularGauge>

    <gauge:SfCircularGauge.Scales>

    <gauge:CircularScale  Radius="150" StartValue="0" EndValue="100" 

    EnableSmartLabels="True" NumericScaleType="Thousands" 

    RimStroke="#39B2C6" RimStrokeThickness="8"

    TickStroke="#BEBEBE" LabelStroke="#9E9E9E" SmallTickStroke="#BEBEBE">

    <gauge:CircularScale.Pointers>

    <gauge:CircularPointer NeedlePointerVisibility="Collapsed"/>

    </gauge:CircularScale.Pointers>

    </gauge:CircularScale>

    </gauge:SfCircularGauge.Scales>

    </gauge:SfCircularGauge>
SfCircularGauge sfCircularGauge = new SfCircularGauge();

CircularScale circularScale = new CircularScale();

circularScale.StartValue = 0;

circularScale.EndValue = 100;

circularScale.EnableSmartLabels = true;

circularScale.NumericScaleType = NumericScaleType.Thousands;

circularScale.RimStrokeThickness = 8;

circularScale.Radius = 150;

circularScale.RimStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x57, 0xb2, 0xc6));

circularScale.TickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1));

circularScale.SmallTickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1));

circularScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x99, 0x99, 0x99));

CircularPointer circularPointer = new CircularPointer();

circularPointer.NeedlePointerVisibility = Windows.UI.Xaml.Visibility.Collapsed;

circularScale.Pointers.Add(circularPointer);

sfCircularGauge.Scales.Add(circularScale);

Labels_img5

Setting number of fraction digits for labels

The NoOfFractionDigit property is used to set the number of fractional digits to be displayed in the scale labels.

XAML
C#
<gauge:SfCircularGauge>

    <gauge:SfCircularGauge.Scales>

    <gauge:CircularScale  Radius="150" NoOfFractionalDigit="3"

    RimStroke="#39B2C6" RimStrokeThickness="8"

    TickStroke="#BEBEBE" LabelStroke="#9E9E9E" SmallTickStroke="#BEBEBE">

    <gauge:CircularScale.Pointers>

    <gauge:CircularPointer NeedlePointerVisibility="Collapsed"/>

    </gauge:CircularScale.Pointers>

    </gauge:CircularScale>

    </gauge:SfCircularGauge.Scales>

    </gauge:SfCircularGauge>
SfCircularGauge sfCircularGauge = new SfCircularGauge();

CircularScale circularScale = new CircularScale();

circularScale.NoOfFractionalDigit = 3;

circularScale.RimStrokeThickness = 8;

circularScale.Radius = 150;

circularScale.RimStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x57, 0xb2, 0xc6));

circularScale.TickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1));

circularScale.SmallTickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1));

circularScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x99, 0x99, 0x99));

CircularPointer circularPointer = new CircularPointer();

circularPointer.NeedlePointerVisibility = Windows.UI.Xaml.Visibility.Collapsed;

circularScale.Pointers.Add(circularPointer);

sfCircularGauge.Scales.Add(circularScale);

Labels_img6

Setting postfix and prefix for labels

You can postfix/prefix values to the scale labels using the LabelPostfix and LabelPrefix properties, respectively.

Label postfix

The LabelPostfix property allows to postfix the values to the scale labels.

XAML
C#
<gauge:SfCircularGauge>

     <gauge:SfCircularGauge.Scales>

    <gauge:CircularScale  Radius="150" LabelPostfix="k"

     RimStroke="#39B2C6" RimStrokeThickness="8"

     TickStroke="#BEBEBE" LabelStroke="#9E9E9E" SmallTickStroke="#BEBEBE">

    <gauge:CircularScale.Pointers>

    <gauge:CircularPointer NeedlePointerVisibility="Collapsed"/>

    </gauge:CircularScale.Pointers>

    </gauge:CircularScale>

    </gauge:SfCircularGauge.Scales>

    </gauge:SfCircularGauge>
SfCircularGauge sfCircularGauge = new SfCircularGauge();

CircularScale circularScale = new CircularScale();

circularScale.LabelPostfix = "k";

circularScale.RimStrokeThickness = 8;

circularScale.Radius = 150;

circularScale.RimStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x57, 0xb2, 0xc6));

circularScale.TickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1));

circularScale.SmallTickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1));

circularScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x99, 0x99, 0x99));

CircularPointer circularPointer = new CircularPointer();

circularPointer.NeedlePointerVisibility = Windows.UI.Xaml.Visibility.Collapsed;

circularScale.Pointers.Add(circularPointer);

sfCircularGauge.Scales.Add(circularScale);

Labels_img7

Label prefix

The LabelPrefix property allows to prefix the values to the scale labels.

XAML
C#
<gauge:SfCircularGauge>

    <gauge:SfCircularGauge.Scales>

    <gauge:CircularScale  Radius="150" LabelPrefix="$"

    RimStroke="#39B2C6" RimStrokeThickness="8"

    TickStroke="#BEBEBE" LabelStroke="#9E9E9E" SmallTickStroke="#BEBEBE">

    <gauge:CircularScale.Pointers>

    <gauge:CircularPointer NeedlePointerVisibility="Collapsed"/>

    </gauge:CircularScale.Pointers>

    </gauge:CircularScale>

    </gauge:SfCircularGauge.Scales>

    </gauge:SfCircularGauge>
SfCircularGauge sfCircularGauge = new SfCircularGauge();

CircularScale circularScale = new CircularScale();

circularScale.LabelPrefix = "$";

circularScale.RimStrokeThickness = 8;

circularScale.Radius = 150;

circularScale.RimStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x57, 0xb2, 0xc6));

circularScale.TickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1));

circularScale.SmallTickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1));

circularScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x99, 0x99, 0x99));

CircularPointer circularPointer = new CircularPointer();

circularPointer.NeedlePointerVisibility = Windows.UI.Xaml.Visibility.Collapsed;

circularScale.Pointers.Add(circularPointer);

sfCircularGauge.Scales.Add(circularScale);

Labels_img8

Edge label customization

You can customize the edge label by using the ShowFirstLabel and ShowLastLabel properties, which are Boolean properties. The ShowFirstLabel property is used to enable or disable first label, and the ShowLastLabel property is used to enable or disable the last label in circular gauge.

XAML
C#
<gauge:SfCircularGauge>

      <gauge:SfCircularGauge.Scales>

     <gauge:CircularScale  Radius="150" ShowFirstLabel = "False" StartValue = "0"

       EndValue = "12" Interval ="1" 

      MinorTicksPerInterval = "5" StartAngle = "270" SweepAngle = "360" 

      RimStroke="#39B2C6" RimStrokeThickness="8"

      TickStroke="#BEBEBE" LabelStroke="#9E9E9E" SmallTickStroke="#BEBEBE">

     <gauge:CircularScale.Pointers>

     <gauge:CircularPointer NeedlePointerVisibility="Collapsed"/>

     </gauge:CircularScale.Pointers>

     </gauge:CircularScale>

     </gauge:SfCircularGauge.Scales>

     </gauge:SfCircularGauge>
SfCircularGauge sfCircularGauge = new SfCircularGauge();

CircularScale circularScale = new CircularScale();

circularScale.StartValue = 0;

circularScale.Interval = 1;

circularScale.MinorTicksPerInterval = 5;

circularScale.EndValue = 12;

circularScale.StartAngle = 270;

circularScale.SweepAngle = 360;

circularScale.ShowFirstLabel = false;

circularScale.RimStrokeThickness = 8;

circularScale.Radius = 150;

circularScale.RimStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x57, 0xb2, 0xc6));

circularScale.TickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1));

circularScale.SmallTickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1));

circularScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x99, 0x99, 0x99));

CircularPointer circularPointer = new CircularPointer();

circularPointer.NeedlePointerVisibility = Windows.UI.Xaml.Visibility.Collapsed;

circularScale.Pointers.Add(circularPointer);

sfCircularGauge.Scales.Add(circularScale);

Labels_img9

Setting auto angle for label

Scale labels can be rotated automatically based on the current angle. To enable or disable the auto angle, use the EnableAutoAngle property.

XAML
C#
<gauge:SfCircularGauge>

     <gauge:SfCircularGauge.Scales>

      <gauge:CircularScale  Radius="150" EnableAutoAngle="true"

       RimStroke="#39B2C6" RimStrokeThickness="8"

       TickStroke="#BEBEBE" LabelStroke="#9E9E9E" SmallTickStroke="#BEBEBE">

      <gauge:CircularScale.Pointers>

      <gauge:CircularPointer NeedlePointerVisibility="Collapsed"/>

      </gauge:CircularScale.Pointers>

      </gauge:CircularScale>

     </gauge:SfCircularGauge.Scales>

     </gauge:SfCircularGauge>
SfCircularGauge sfCircularGauge = new SfCircularGauge();

CircularScale circularScale = new CircularScale();

circularScale.EnableAutoAngle = true;

circularScale.RimStrokeThickness = 8;

circularScale.Radius = 150;

circularScale.RimStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x57, 0xb2, 0xc6));

circularScale.TickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1));

circularScale.SmallTickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1));

circularScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x99, 0x99, 0x99));

CircularPointer circularPointer = new CircularPointer();

circularPointer.NeedlePointerVisibility = Windows.UI.Xaml.Visibility.Collapsed;

circularScale.Pointers.Add(circularPointer);

sfCircularGauge.Scales.Add(circularScale);

Labels_img10