Example of Range in Javascript Circular Gauge 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.

More Details...

Select Range
Range Start
Range End
Range Color
Range Font Color
Start Width
End Width
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.