Highly Customizable Xamarin.Forms Circular Gauge
- Display numerical values and ranges on a circular scale.
- Customize a gauge to simulate a speedometer, temperature monitor, or dashboard.
- Use built-in animation and interactive pointers that can be dragged from one place to another.
Trusted by the world’s leading companies
Overview
The Xamarin Circular Gauge, also known as Radial Gauge is a data visualization component that helps display numerical values on a circular scale. It has highly customizable features, such as scales, pointers, ranges, and annotations. It also offers creation of speedometer, temperature monitor, dashboard, meter gauge, multi-axis clock, modern activity gauge, direction compass, etc.
Gauge scales
The scale of the Xamarin.Forms Circular Gauge control is an easily customizable circular arc in which a set of values can be plotted based on business logic.
Labels customization
Customize the look and feel of the default labels using the font style, size, and color properties. You can also add prefix or suffix text to the label.
Ticks customization
Define your own style for minor and major ticks with the help of the size, color, and thickness properties.
Offset
To enhance readability, change the default scale position by setting the offset value for labels, ticks, and the rim.
Rim
The rim is used to add a circular border to a gauge. You can change the default rim’s look to your own style.
Multiple scales
Add multiple scales to the gauge to design it like a clock, dashboard, speedometer, etc.
Direction
Change the scale direction to clockwise or counterclockwise.
Gauge range
A range of the Xamarin.Forms circular gauge is a visual element that helps you quickly visualize where a value falls on a circular scale.
Range position
Change the range position to any place inside the gauge.
Gradient range color
Range colors can vary gradually based on values to create a smooth color transition.
Range thickness
To enhance gauge usage and readability, range thickness can vary based on values.
Multiple ranges
The Xamarin.Forms Circular Gauge control allows you to add multiple ranges inside a scale to indicate color variation.
Needle pointer
Indicate a current value by using the highly customizable needle-type element.
Pointer type
Change the needle pointer type to a rectangle or arrow to indicate or highlight values.
Knob
A knob is a rounded ball at the end of an arrow pointer that can be customized to enhance a pointer’s look.
Tail
Add a tail to the knob to add an extra element of style.
Multiple needle pointers
Add more than one needle pointer to a scale to indicate multiple values.
Range pointer
A range pointer is used to indicate the current value relative to the start value of a circular scale.
Pointer position
Move a range pointer to any location inside the gauge.
Range cap
Add a rounded range cap to the start, end, and sides of the pointer to provide a rich styling experience for data visualization.
Multiple pointers
Add multiple range pointers inside a scale to indicate multiple progress activity.
Marker pointer
Indicate current values by using different types of marker pointers.
Pointer type
To highlight values, set the marker pointer type to a built-in shape, such as a triangle, inverted triangle, square, or diamond.
Marker pointer position
Move marker pointers to any location inside the gauge.
Image pointer
Customize a marker pointer by adding images to highlight values.
Annotations
Annotations display metadata about a Xamarin.Forms circular gauge at specific points of interest in a plotting area.
Image annotations
The annotations feature provides options to add any image over a gauge control with respect to offset position. You can add multiple images in a single control.
View annotations
Add any view to the gauge control with respect to its offset position. You can also add multiple views in a single control.
Text annotations
Add any text over the Circular Gauge control to enhance its readability. You can also add multiple text instances in a single control.
Pointer animation
The Xamarin.Forms Circular Gauge control provides a visually appealing way to view pointers with animated transitions for a certain time span. You can see smooth pointer transitions by moving the pointer from one place to another.
Pointer interaction
The Xamarin.Forms Circular Gauge control provides an option to drag a pointer from one place to another. This allows you to control the pointer by swiping to change the value at runtime.
Xamarin.Forms Circular Gauge Code Example
Easily get started with the Xamarin.Forms Circular Gauge using a few simple lines of XAML and C# code example as demonstrated below. Also explore our Xamarin.Forms Circular Gauge Example that shows you how to render and configure the Circular Gauge for Xamarin.Forms.
<gauge:SfCircularGauge> <gauge:SfCircularGauge.Headers> <gauge:Header Text="Speedometer" ForegroundColor="Black" TextSize="20" /> </gauge:SfCircularGauge.Headers> </gauge:SfCircularGauge>using Syncfusion.SfGauge.XForms; using Xamarin.Forms; namespace GettingStarted { public class App : Application { SfCircularGauge circularGauge = new SfCircularGauge(); Header header = new Header(); header.Text = "Speedometer"; header.ForegroundColor = Color.Black; header.TextSize = 20; circularGauge.Headers.Add(header); } }Not sure how to create your first circular gauge? Our tutorial videos and documentation can help.
I’d love to watch now I’d love to read now150+ XAMARIN UI CONTROLS
ALL CONTROLS
- Xamarin.Forms
- Xamarin.Android
- Xamarin.iOS
- GRIDSDATA VISUALIZATIONNAVIGATIONEDITORSLAYOUTPROJECT MANAGEMENTNOTIFICATIONDOCUMENT PROCESSING LIBRARIESVIEWER/EDITORMISCELLANEOUSCHAT
- GRIDSDATA VISUALIZATIONNAVIGATIONEDITORSLAYOUTPROJECT MANAGEMENTNOTIFICATIONVIEWER/EDITORDOCUMENT PROCESSING LIBRARIESMISCELLANEOUS
- GRIDSDATA VISUALIZATIONNAVIGATIONEDITORSLAYOUTPROJECT MANAGEMENTNOTIFICATIONVIEWER/EDITORDOCUMENT PROCESSING LIBRARIESMISCELLANEOUS
The most downloaded control (based on the nuget.org download count).
Frequently Asked Questions
Why should you choose Syncfusion Xamarin Circular Gauge?
The Xamarin Circular Gauge component helps display numerical values on a circular scale.
- The gauge can be customized to simulate speedometer, temperature monitor, dashboard, multi-axis clock, direction compass, and more.
Use built-in animation to drag pointers from one place to another.
- One of the best Xamarin Circular Gauges in the market that offers a feature-rich UI.
- Simple configuration and API.
Expansive learning resources such as demos, documentation, and videos to learn quickly and get started with Xamarin Circular Gauge.
Where can I find the Syncfusion Xamarin Circular Gauge demo?
You can find our Xamarin Circular Gauge demo here.
Can I download and utilize the Syncfusion Xamarin Circular Gauge for free?
No, this is a commercial product and requires a paid license. However, a free community license is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue, 5 or fewer developers, and 10 or fewer total employees.
How do I get started with Syncfusion Xamarin Circular Gauge?
A good place to start would be our comprehensive getting started documentation.
Our Customers Love Us
Having an excellent set of tools and a great support team, Syncfusion® reduces customers’ development time.Here are some of their experiences.
Amazing tool, great designs
Using Xamarin templates from Syncfusion I can focus on the code and do not have to worry about design. Very easy to implement.
Dirk F, 
Software Development Engineer, Small-Business
Essential for any Xamarin developer!
A large number of components that complement or improve almost everything that does not yet exist in Xamarin. The support is the best I've ever seen! They fix bugs quickly and are always willing to listen to suggestions.
Cezar W,
Co-Founder, Small-Business
Rated by users across the globe
Syncfusion Xamarin.Forms Resources
Learning 
Documentation
Documentation 
Awards
Greatness—it’s one thing to say you have it, but it means more when others recognize it. Syncfusion® is proud to hold the following industry awards.
