• Bootstrap v5
  • Bootstrap v5 Dark
  • Tailwind CSS
  • Tailwind CSS Dark
  • Material
  • Bootstrap v4
  • Fabric
  • Fabric Dark
  • High Contrast
Theme Selection
Mode Selection
*Translated by Google Translator.
Essential Studio
All Controls

Example of Range in ASP.NET Core CircularGauge Control

This sample illustrates how to highlight a region in an axis by using ranges in gauge. Start, end, color, width and corner radius of the range can be changed by using the options provided in the property panel.

Select Range
Range Start    0
Range End    40
Range Color
Range Font Color
Start Width    10
End Width    10
Corner Radius

In this example, you can see how to customize the ranges of an axis in the circular gauge. Ranges are used to group the axis values, you can use start, end, color, startWidth, endWidth, radius, and roundedCornerRadius properties to customize the ranges. In this sample, an axis is shown with one range and options to customize the range properties with property panel.

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