Using percentages as the value for pointers and ranges

[Mikkel Brandsen]

I'm trying to have some dynamic gauges that change depending on the selected item - each item has it's own amount of an object and then a used amount of the object.

Ex.: i have 100 ships, 70 of them is in use, but the next item has 55000 ships and is using 452.

I want to mark the ranges that's acceptable which is somewhere around 100% -> 75%.

My gauge code looks like this:

<SfCircularGauge Title="Familes">

                                    <CircularGaugeAxes>

                                        <CircularGaugeAxis Radius="80%" Minimum="0" Maximum="@model.Families" StartAngle="270" EndAngle="90">

                                            <CircularGaugeAxisLineStyle Width="5">

                                            </CircularGaugeAxisLineStyle>

                                            <CircularGaugePointers>

                                                <CircularGaugePointer Value="@model.PlacedFamilies">

                                                </CircularGaugePointer>

                                            </CircularGaugePointers>

                                            <CircularGaugeRanges>

                                                <CircularGaugeRange Start="80"

                                                                End="@model.Families"

                                                                StartWidth="2"

                                                                EndWidth="20">

                                                </CircularGaugeRange>

                                            </CircularGaugeRanges>

                                        </CircularGaugeAxis>

                                    </CircularGaugeAxes>

                                </SfCircularGauge>

I basically just need a percentage value for the start of the range.

[Indumathi Ravi]

Hi Mikkel,

Thank you for contacting Syncfusion support.

The Circular Gauge do not support rendering pointers and ranges based on the percentage values. However, we can visually represent labels in the Circular Gauge using “Format” property in the “CircularGaugeAxisLabelStyle” tag. Please find the code snippet for the same below.

Code Snippet:

<SfCircularGauge Title="Familes">

           <CircularGaugeAxes>

                 <CircularGaugeAxis Radius="80%" Minimum="0" Maximum="100" StartAngle="270" EndAngle="90">                                                         

                          <CircularGaugeAxisLabelStyle Format="{value} %"></CircularGaugeAxisLabelStyle>

                                    <CircularGaugePointers>

                                             <CircularGaugePointer Value="15"> </CircularGaugePointer>

                                   </CircularGaugePointers>

                                   <CircularGaugeRanges>

                                            <CircularGaugeRange Start="80"  End="100"  StartWidth="2" EndWidth="20"> </CircularGaugeRange>

                                  </CircularGaugeRanges>

                 </CircularGaugeAxis>

             </CircularGaugeAxes>

</SfCircularGauge>

We have created a sample to demonstrate the same and it can be downloaded from the below link.

https://www.syncfusion.com/downloads/support/directtrac/general/ze/Circular-701721741

Please let us know if you need any further assistance.

Regards,

Indumathi R.