Example of Range in React Circular Gauge Component


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...


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.