Using a Range Circular Gauge

[Steven]

Good Evening,

Is there any way to have a range circular gauge with a purple range with percentage completed? I haven't seen any examples with a percentage for this gauge.

Thanks,

Steven

[Swetha Babu]

Hi Steven,

Thank you for contacting Syncfusion support.

We do not support for range with percentages in the circular gauge control. We need to provide corresponding axis values in the range property as start and end values using start and end properties. This is the behavior of the component. 

  

We can set color to the range using color property. We can set purple color to the range in this property. Please find the code snippet for the same below. 

  

Code Snippet: 

 @Html.EJS().CircularGauge("range-container").Axes(axes => axes 

   .Radius("80%").StartAngle(230).EndAngle(130).LabelStyle(new CircularGaugeLabel 

   { 

       Position = Position.Inside, 

       Font = new CircularGaugeFont { Size = "12px", FontFamily = "Roboto", FontStyle = "Regular", Opacity = 1 }, 

   }).Pointers(ViewBag.Pointers).Ranges(ViewBag.Ranges) 

   .StartAngle(210).EndAngle(150).Minimum(0).Maximum(120).Radius("80%") 

   .LineStyle(new CircularGaugeLine { Width = 10, Color = "lightgrey" }) 

   .MinorTicks(new CircularGaugeTick { Height = 0, Width = 0, Color = "transparent" }).MajorTicks(new CircularGaugeTick { Height = 0, Width = 0, Color = "transparent" }).Add() 

   ).Render() 

Please let us know if you need any further assistance.

Regards,
Swetha Babu