)
We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to achieve Doughnut Chart requirement in CircularGauge

Platform: Xamarin.Forms |
Control: SfCircularGauge |
Published Date: January 11, 2018 |
Last Revised Date: June 25, 2019

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

 

 

 

2X faster development

The ultimate Xamarin UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon