• Material 3
  • Material 3 Dark
  • Fluent
  • Fluent Dark
  • Bootstrap v5
  • Bootstrap v5 Dark
  • Tailwind CSS
  • Tailwind CSS Dark
  • Material
  • Bootstrap v4
  • High Contrast
Preferences
Theme Selection
Mode Selection
Touch
Mouse
Localization
*Translated by Google Translator.
Currency

Example of Range Customization in ASP.NET MVC Circular Gauge Control

This sample demonstrates how to highlight a region in an axis using ranges in the circular gauge. The width, corner radius, and start and end range of a range can all be customized.

DEMO
SOURCE
Properties
Select Range
Range Start
0
Range End
40
Start Width
10
End Width
10
Corner Radius
0

In this example, you can see how to render and configure the ranges in the circular gauge. Ranges are used to group the axis values, and you can use Start, End, Color, StartWidth, EndWidth, Radius and RoundedCornerRadius properties to customize them. In addition, an axis with multiple ranges is shown in the circular gauge component, as well as options to customize the range properties via the property panel.

More information on the ranges can be found in this documentation section.

Transform your ASP.NET MVC web apps today with Syncfusion ASP.NET MVC components
85+ high-performance and responsive UI components
Dedicated support
Hassle-free licensing
TRY IT FOR FREE