Example of Ranges in Javascript Linear Gauge Control


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

More Details...

Select Range
Range Color
Range Font Color
Range Start
Range End
Range Start Width
Range End Width

In this example, you can see how to render and configure the ranges in linear gauge. You can use start, end, startWidth, endWidth and position properties to customize the ranges. You can also specify various colors for the ranges in the axis. If you enable the useRangeColor property, then the axis labels will be displayed based on its range color. More information about ranges can be found in this documentation section.