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 : November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to use a circular gauge control as a circular progress bar?

How to use a circular gauge control as a circular progress bar?

This article explains you to design a circular progress bar using Circular Gauge.

 

Circular Gauge can be used as circular progress bar for various scenarios and control can be customized accordingly.

 

The following screenshot displays the circular progress bar using circular gauge.

 

 

 

 

In this article, three gauges are added in a layout each can be used for different scenarios.

 

Import the SfGauge namespace as shown below,

 

Xaml

 

 

  1. Circular gauge for finding percentage of Shareholders in a company.

 

Create a Xamarin application and initialize SfCircularGauge control in it. Add Scale with suitable angles for Fuel Meter using StartAngle and SweepAngle

Xaml

 

 

 

Range Pointers can be used to know the percentage of Share Holders available.

 

Xaml

 

 

 

Add headers to add percentage value of shareholders, since header can be positioned as required.

 

Xaml

 

 

Output for the above code snippet-

 

 

  1. Circular gauge for finding progress of total Investors in a share market

Create a Xamarin application and initialize SfCircularGauge control in it. Add Scale with suitable angles for Fuel Meter using StartAngle and SweepAngle

 

Xaml

 

 

Using Major and Minor Ticks, progress bar can be customized in circular gauge

Xaml

 

 

 

 

Add RangePointer in order to highlight the Investors percentage from Total.

 

Xaml

 

 

Finally, Add header to indicate percentage value of Investors, since header can be positioned as required.

Xaml

 

 

Output for the above code snippet-

 

 

  1. Circular gauge for finding percentage of Shareholders in a company.

 

Create a Xamarin application and initialize SfCircularGauge control in it. Add Scale with suitable angles for Fuel Meter using StartAngle and SweepAngle

 

Xaml

 

 

Ranges can be added to circular gauge, by which levels of progress can be differentiated using different colors.

Xaml

 

 

Add Header, to know the profit percentage, using header the position can be altered as required.

Xaml

 

 

Finally, add all the three circular gauge in layout and set content as that layout.

Xaml

 

 

Output for the above code snippet-

 

Article ID: Published Date: Last Revised Date: Platform: Control:
6620 04/12/2016 10/19/2017 Xamarin.Forms SfCircularGauge
Did you find this information helpful?
Comments
Lyndon Hughey Aug 25, 2016
his page would be much more powerful if the picture was shown at the top and the images were broken up into 3 seperate images with corresponding code below.  This page currently appears as a big block of code to most users who don't scroll to the very bottom for the payoff.  

I'm excited to see that the ability to create a circular progress bar exists.  I think you should highlight it as the feature over the circular gauge as there are more apps that use the circular progress bar over gauges. 

Keep up the good work, Syncfusion!
Reply
Add Comment
You must log in to leave a comment

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