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

CircularGauge EndValue Binding issue.


When binding values to the EndValue of gauge is works fine on Android and the gauge renders fine , with multiple ranges but on iOS , just doesn't seem to render properly unless i hardcode the EndValue in the xaml instead.

gauge:SfCircularGauge x:Name="CircularGauge"  >
                            <gauge:Scale NumberOfDecimalDigits="0" StartValue="0" EndValue="{Binding AccountTarget}"  Interval="{Binding IntervalGauge}" StartAngle="180" ShowRim="False"  SweepAngle="180" 
                                       MinorTicksPerInterval="{Binding MinorTicksPerIntervalGauge}" LabelFont="Bold" LabelFontSize="12" ShowLabels="True">
                                    <OnPlatform  x:TypeArguments="x:Double">
                                        <On Platform="iOS" Value="0.9"></On>
                                        <On Platform="Android" Value="0.9"></On>
                                    <gauge:Range   StartValue="0"  EndValue="90" Thickness="10" Color="#FFFF0000"   Offset="0.8" />
                                    <gauge:Range StartValue="90" EndValue="180" Thickness="10" Color="#FFDAA520" Offset="0.8" />
                                    <gauge:Range StartValue="180" EndValue="{Binding AccountTarget}" Thickness="10" Color="Purple" Offset="0.8" />
                                    <gauge:NeedlePointer Type="Triangle" Value="{Binding CurrentTarget}" Color="Red" Thickness="2.5" LengthFactor="0.7"
                                                            KnobRadius="10" KnobColor="#2bbfb8" />
                                    <gauge:NeedlePointer Value="{Binding Number}" Color="Black" Thickness="4" LengthFactor="0.7"
                                                            KnobRadius="5" KnobColor="White" />
                                    <gauge:TickSettings Length="8" Color ="DarkGray" Thickness="2" Offset="0.8" />
                                    <gauge:TickSettings Length="4" Color ="Gray" Thickness="1.5" Offset="0.78"/>

Any help would be appreciated.

Attachment: gauges_e5701b4a.zip

5 Replies

AK Ashwin Kumaravel Syncfusion Team August 28, 2017 07:24 AM UTC

Hi Stef,

Thanks for using Syncfusion products,

We have validated your query but we are unable to reproduce the scenario at our end in version. We have created a sample with circularGuage based on your code snippet and bounded Values with Scale EndValue and Range EndValue, but still we are not able to reproduce the reported issue in iOS platform.

Can you please download the testing sample from the below link?

Sample Link- http://www.syncfusion.com/downloads/support/forum/132316/ze/GaugeSample-243847410  


Can you please try the attached sample and get back us if you still face the same issues?

Since the issue is not reproduced at our end, we would like to know the following details, which will helpful in further analysis and to provide the solution sooner.

- Modify the attached sample to replicate your scenario
- Or provide your sample along with replication steps.
-Product version.


ST Stef August 29, 2017 11:01 AM UTC

Hi Ashwin,

So I looked at your example and i found it probably the way i am loading the data into my view model.

I am using Asynchronous calls to load the model like below : 

private async void LoadDataTask()
          var dataServices = new DataServices();
          IntervalGauge = "";
          MinorTicksPerIntervalGauge = "";
              var snmPredictionAccountCount = await dataServices.GetSnmPredictionAccounts();
              AccountTarget =   snmPredictionAccountCount.target;
              CurrentTarget = snmPredictionAccountCount.CurrentAccountTarget;
              Number =  snmPredictionAccountCount.number;
              IntervalGauge = RoundUp((Convert.ToInt32(AccountTarget) / 10)).ToString();
              MinorTicksPerIntervalGauge = (Convert.ToInt32(IntervalGauge) / 10).ToString();
          catch (Exception e)
              var s = e.Message;
Is there way you suggest to load a gauge using Asynchronous calls ? to make it more consistent with your components, as it works fine on Android.

AK Ashwin Kumaravel Syncfusion Team August 30, 2017 12:14 PM UTC

Hi Stef,

Thanks for the update,

We have validated your code snippet, can you check whether you can able to get correct value in LoadTask() method in below line

AccountTarget = snmPredictionAccountCount.target

We would like to suggest you to set snmPredictionAccountCount as Binding context to Gauge

Can you please share your issue reproducing sample so that it will be very helpful for us to proceed further?


ST Stef August 30, 2017 04:01 PM UTC

Hi Ashwin,

I have changed your sample app you uploaded before, to try to mimic my issue( So its a bit of a hack).

So andriod looks nice but ios looks wrong.



Attachment: GaugeSample_(2)_478a8f20.zip

AK Ashwin Kumaravel Syncfusion Team August 31, 2017 07:13 AM UTC

Hi Stef,

Thanks for the update,

We could reproduce the reported issue “CircularGauge EndValue Binding issue” at our end. And we have logged a defect report regarding the same. A support incident to track the status of this defect has been created under your account.

Please log on to our support website to check for further updates.



Live Chat Icon For mobile
Up arrow icon