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.
<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);
Label font customization
The label font can be customized using the FontSize, FontFamily, and FontStyle properties.
<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);
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
LabelPositionproperty.
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="#rw827z74tplaq3pv9awccu4shng061hi-xml" aria-controls="home" role="tab" data-toggle="tab" data-original-lang="xml">XAML</a></li>
<li role="presentation" class=""><a data-target="#ufp0sbl98atga7pwd3wpigefmwbxvrxd-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="rw827z74tplaq3pv9awccu4shng061hi-xml" data-original-lang = "xml" ><div class="highlight"><pre><code class="language-xml" data-lang="xml"><span></span><span class="nt"><gauge:SfCircularGauge></span>
<span class="nt"><gauge:SfCircularGauge.Scales></span>
<span class="nt"><gauge:CircularScale</span> <span class="na">Radius=</span><span class="s">"150"</span> <span class="na">LabelPosition=</span><span class="s">"Outside"</span>
<span class="na">RimStroke=</span><span class="s">"#39B2C6"</span> <span class="na">RimStrokeThickness=</span><span class="s">"8"</span>
<span class="na">TickStroke=</span><span class="s">"#BEBEBE"</span> <span class="na">LabelStroke=</span><span class="s">"#9E9E9E"</span> <span class="na">SmallTickStroke=</span><span class="s">"#BEBEBE"</span><span class="nt">></span>
<span class="nt"><gauge:CircularScale.Pointers></span>
<span class="nt"><gauge:CircularPointer</span> <span class="na">NeedlePointerVisibility=</span><span class="s">"Collapsed"</span><span class="nt">/></span>
<span class="nt"></gauge:CircularScale.Pointers></span>
<span class="nt"></gauge:CircularScale></span>
<span class="nt"></gauge:SfCircularGauge.Scales></span>
<span class="nt"></gauge:SfCircularGauge></span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="ufp0sbl98atga7pwd3wpigefmwbxvrxd-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>

-
Positioning the labels far away from the ticks using the
LabelOffsetproperty. First, set theLabelPositionto custom, and then position the label using theLabelOffsetproperty.<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);

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
<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);
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.
<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);
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.
<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);
Label prefix
The LabelPrefix property allows to prefix the values to the scale labels.
<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);
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.
<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);
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.
<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);