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

Overview

The Xamarin.Forms Circular Gauge which is 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. Also, it offers creation of speedometer, temperature monitor, dashboard, meter gauge, multi axes clock, modern activity gauge, direction compass, etc.

Overview of Xamarin.Forms Circular Gauge control or radial gauge


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.

Xamarin.Forms Circular Gauge control or radial gauge showing customized scale labels

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.

Xamarin.Forms Circular Gauge control or radial gauge showing customized scale ticks

Ticks customization

Define your own style for minor and major ticks with the help of the size, color, and thickness properties.

Xamarin.Forms Circular Gauge control or radial gauge showing a customized scale by offset support

Offset

To enhance readability, change the default scale position by setting the offset value for labels, ticks, and the rim.

Xamarin.Forms Circular Gauge control or radial gauge showing rim support

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.

Xamarin.Forms Circular Gauge control or radial gauge showing clock design with multiple scale support

Multiple scales

Add multiple scales to the gauge to design it like a clock, dashboard, speedometer, etc.

Xamarin.Forms Circular Gauge control or radial gauge showing different scale direction

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.

Xamarin.Forms Circular Gauge or radial gauge showing customized range position

Range position

Change the range position to any place inside the gauge.

Xamarin.Forms Circular Gauge control or radial gauge showing gradient color ranges

Gradient range color

Range colors can vary gradually based on values to create a smooth color transition.

Xamarin.Forms Circular Gauge control or radial gauge showing different range thickness

Range thickness

To enhance gauge usage and readability, range thickness can vary based on values.

Xamarin.Forms Circular Gauge or radial gauge showing multiple range support

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.

Xamarin.Forms Circular Gauge or radial gauge showing different types of needle pointers

Pointer type

Change the needle pointer type to a rectangle or arrow to indicate or highlight values.

Xamarin.Forms Circular Gauge control or radial gauge showing a needle pointer with a knob

Knob

A knob is a rounded ball at the end of an arrow pointer that can be customized to enhance a pointer’s look.

Xamarin.Forms Circular Gauge control or radial gauge showing a needle pointer with a tail

Tail

Add a tail to the knob to add an extra element of style.

Xamarin.Forms Circular Gauge control or radial gauge showing a compass design with multiple needle pointers

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.

Xamarin.Forms Circular Gauge control or radial gauge showing customized range position

Pointer position

Move a range pointer to any location inside the gauge.

Xamarin.Forms Circular Gauge control or radial gauge showing range pointer with rounded corners

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.

Xamarin.Forms Circular Gauge or radial gauge showing multiple range pointers

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.

Xamarin.Forms Circular Gauge control or radial gauge showing 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.

Xamarin.Forms Circular Gauge control or radial gauge showing a customized marker pointer position

Marker pointer position

Move marker pointers to any location inside the gauge.

Xamarin.Forms Circular Gauge control or radial gauge showing an image in a marker pointer

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.

Xamarin.Forms Circular Gauge control or radial gauge showing image annotation type

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.

Xamarin.Forms Circular Gauge or radial gauge showing view annotation

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.

Xamarin.Forms Circular Gauge control or radial gauge showing text annotation

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.

Xamarin.Forms Circular Gauge control or radial gauge showing animated pointers


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 control or radial gauge showing dragged pointer


130+ XAMARIN UI CONTROLS

ALL CONTROLS
  • Xamarin.Forms
  • Xamarin.Android
  • Xamarin.iOS

Transform your applications today by downloading our free evaluation versionDownload Free Trial

Scroll up 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