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

Overview

The circular gauge control 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.

Circular gauge control for Xamarin.iOS overview


Gauge scales

The scale of the circular gauge is a circular arc, where a set of values can be plotted based on any business logic. The appearance of the scale can be customized easily.

Circular gauge labels customization

Labels customization

The look and feel of the default labels can be customized using the font style, size, and color properties. You can also add prefix or suffix text to the label.

Circular gauge ticks customization

Ticks customization

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

Setting offset to position circular gauge control

Offset

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

Rim support for circular gauge

Rim

Rim is used to add a circular border to the gauge. You can change the default rim’s look to your own style.

Multiple scales support for circular gauge

Multiple scales

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

Direction support for circular gauge

Direction

Change the scale direction to clockwise or counterclockwise.


Gauge range

A range of the circular gauge is a visual element that helps you quickly visualize where a value falls on a circular scale.

Positioning a range for circular gauge

Range position

Range position can be changed or moved to any place inside the gauge.

Gradient range color support for circular gauge ranges

Gradient range color

Range colors vary gradually based on values, and give you a smooth color transition effect.

Range thickness support for circular gauge range

Range thickness

Range thickness varies based on the values to enhance the usage and readability.

Multiple ranges support in circular gauge

Multiple ranges

The circular gauge allows you to add multiple ranges inside the scale to show color variations.


Needle pointer

The current value can be pointed out by using a highly customizable needle-type element.

Different types of circular gauge pointers

Pointer type

The needle pointer type can be changed to a rectangle or arrow to point out or highlight values.

Knob support for circular gauge pointer

Knob

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

Tail support for circular gauge pointer

Tail

A tail can be added to the knob to add an extra element of style.

Multiple needle pointers for circular gauge

Multiple needle pointers

More than one needle pointer can be added to a scale to indicate multiple values.


Range pointer

A range pointer is used to point out the current value from the start value of the circular scale.

Positioning circular gauge range pointer

Pointer position

A range pointer can be changed or moved to any place inside the gauge.

Range cap support for circular gauge range pointer

Range cap

You can add a rounded range cap to the start, end, and both sides of the pointer. This support provides a rich styling experience for data visualization.

Multiple range pointer support for circular gauge

Multiple pointers

Multiple range pointers can be added inside the scale to indicate multiple progress activity.


Marker pointers

The current value can be pointed out by using the following different types of marker pointers.

Different marker pointer support for circular gauge

Pointer type

The marker pointer type can be changed to built-in shapes such as a triangle, inverted triangle, square, or diamond to highlight the values.

Positioning circular gauge marker pointer

Marker pointer position

Marker pointers can be changed or moved to any place inside the gauge.

Image pointer support for circular gauge marker pointer

Image pointer

The marker pointer can be customized by adding images to highlight the values.


Annotations

Annotations display metadata about a circular gauge at a specific point of interest in the plotting area.

Image annotation support for circular gauge

Image annotations

Annotations provide options to add any image over the gauge control with respect to its offset position. You can add multiple images in a single control.

View annotation support for circular gauge

View annotations

You can add any view to the gauge control with respect to its offset position. You can also add multiple views in a single control.

Text annotation support for circular gauge

Text annotations

You can add any text over the gauge control to enhance the readability. You can add multiple text instances in a single control.


Pointer animation

Circular gauge provides a visually appealing way to view pointers with animated transitions for a certain time span. You can feel smooth pointer transitions by moving the pointer from one place to another.

Pointer animation support for circular gauge


Pointer interaction

Circular gauge provides an option to drag the pointer from one place to another. This support allows you to control the pointer by swipe gesture and change the value at runtime.

Pointer interaction support for circular gauge


130+ XAMARIN 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