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. Image for the cookie policy date

A few circular gauge customization questions - pointers, labels, etc

I'm trying to draw a circular gauge with a thick rim.  Ideally I'd only like the pointer to be visible when it overlaps the rim (instead of a straight line from the center of the gauge to the outside of the rim). Is this possible?  Needlepointer doesn't seem to support this.  The other thing that could work would be a rangepointer that didn't connect back to the left side of the gauge.

Also, is there any way to get the labels to display on the outer edge of the rim?  LabelOffset appears to move them from the inner edge of the rim (1.0) to the center point (0.0), but values over 1.0 cause the labels not to display at all.

Finally, the tick marks seems to stick out from the rim (and don't touch the inner part). Is there a way to make them completely line up?  They are set to the same thickness right now.

4 Replies

DW Derrick Willer November 29, 2015 09:05 PM UTC

FYI I've been able to resolve some of this by using a Range to color the background instead of a thick rim.

The two remaining problems I have are:
1. LabelFontSize has no effect
2. Even with a LabelOffset of 0, long values are displayed overlapping the chart.  I'd love to have the label text rotated so it was tangent to the chart, but if that doesn't work, some way to make sure the label was completely outside of the chart as well would be great.

NM Nijamudeen Mohamed Sulaiman Syncfusion Team November 30, 2015 08:47 AM UTC

Hi Derrick,

Thanks for your interest in Syncfusion Products.

Query #1

NeedlePointer Support:
We have “LengthFactor” support to increase the length of the needle pointer. Please find the code example below.


            rangePointer = new RangePointer();



Query #2
Placing Labels outside of Rim:

Based on your provided information, your requirement can be achieved by setting negative values to Scales LabelOffset property of CircularGauge.

            scale.LabelOffset = -0.5;


Query #3:

Ticks position can be adjusted by using Ticks (Major and Minor Ticks) Offset properties (Values can be adjusted by platform specific tweaks of xamarin). Please find the code example below:


            TickSettings minor = new TickSettings();

            minor.Offset = 0.5;

            scale.MinorTickSettings = minor;

            TickSettings major = new TickSettings();

            major.Offset = 1;

            scale.MajorTickSettings = major;

Query #4:

We have fixed the LabelFontSize issue in CircularGauge Xamarin (Android). This issue fix will be included in our upcoming Vol3 Service pack 2 release which is expected by first week of December. We will update you once the implementation has been rolled out. We appreciate your patience until then.

Query #5:

 Long values are displayed overlapping the chart:

Based on your provided information, your requirement can be achieved by setting “NumberOfDecimalDigits property of CircularGauge Scale. Please find the code example below.


            scale.NumberOfDecimalDigits = 1;

If the provided information doesn`t meet your requirement could you please provide more information along with sample with its replication procedure (Mention Xamarin mobile Platform)? It will be very helpful for us to analyse on it and provide you the possible solution.

Please let us know, if you need any further assistance on this.

Nijamudeen M.

DW Derrick Willer November 30, 2015 05:13 PM UTC

#1 this makes the end of the needle (away from the center) longer.  Instead I want the needle not connected to the center point at all.  I've hacked this in by setting the knob color to the background color and giving it a huge radius.

#2 negative values make the labels appear on the wrong side of the center point. I'd need to set the value higher than 1 to move it further away from the center and I can't do that.

#3 ok.  Is there an exact value to use to make them always line up with a range?

#4 ok

#5 setting number of digits isn't possible.  The values I'm displaying are sometimes something like "1.2345" and sometimes "0.00005" and sometimes "12".  If I could set the total number of digits (as opposed to just decimals) this would help somewhat, but I still need to display at least 5 digits and have them not overlap the chart.   

NM Nijamudeen Mohamed Sulaiman Syncfusion Team December 1, 2015 09:13 AM UTC

Hi Derrick,

We have created a separate incidents for this query, please login to below location to have follow up regarding this query.


Please let us know if you have any concern.

Nijamudeen M.

Live Chat Icon For mobile
Up arrow icon