Articles in this section
Category / Section

How to achieve Doughnut Chart requirement in CircularGauge

1 min read

This article explains the steps required to design a circular gauge as a doughnut chart.

Circular gauge control can be customized as doughnut chart as follows,

 

1. Add Scale with suitable angles for rendering doughnut shape by using StartAngle and SweepAngle.

XAML :

            <xForms:Scale ShowTicks="False" ShowLabels="False" RimColor="Black" ScaleStartOffset="0.9" ScaleEndOffset="0.7" StartAngle="180" SweepAngle="180”>

 

2. Use RangePointer to set the Min and Max ranges.

XAML :

<xForms:RangePointer StartOffset="0.9" EndOffset="0.7" Value="60" Color="Brown"></xForms:RangePointer>       

 

3. Add Header to display the Min and Max values. Header position can be altered as required.

XAML :

  <xForms:Header Text="60" TextSize="27" Position="0.5,0.45" ForegroundColor="Brown"/>
                <xForms:Header Text="Min" TextSize="20" Position="0.1,0.54" ForegroundColor="Black"/>
                <xForms:Header Text="Max" TextSize="20" Position="0.9,0.54" ForegroundColor="Black"/>

 

The following screenshot illustrates the circular gauge as doughnut chart.

SfCircularGauge control as Doughnut Chart

 

 

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied