Ranges

The gauge ranges are elements that are usually used to give context to the indicated value (or values). The ranges denote certain parts of the axis range and are usually displayed with different colors to provide additional information. All ranges are arranged in an area alongside the axis line (parallel to it). The distance from this area to the axis line is defined by the Offset property of the GaugeRangesDefinition class. The gauge does not use any strategy to stack ranges or to avoid overlapping of ranges, so you will need to set adequate From/To values to ensure that they are not positioned on top of each other.

To include ranges in your gauge you need to set the Ranges property. You need to pass an object of type GaugeRangesDefinition which has a Ranges collection. In this collection you can add GaugeRange items when you need a solid color, or you can add GaugeGradientRange items when you need gradient colors.

<telerikGauges:GaugeRangesDefinition>
  <telerikGauges:GaugeRange From="0" To="100" Color="Green" />
  <telerikGauges:GaugeRange From="100" To="150" Color="Yellow" />
  <telerikGauges:GaugeGradientRange From="150" To="200">
    <telerikCommon:RadGradientStop Color="Red" Offset="150" />
    <telerikCommon:RadGradientStop Color="Black" Offset="200" />
  </telerikGauges:GaugeGradientRange>
</telerikGauges:GaugeRangesDefinition>

Gradient Ranges

As demonstrated earlier, you can use the GaugeGradientRange to include ranges with gradient color. To do this you can add gradient stops to the GradientStops collection of the gradient range. Each gradient stop has a color and an offset value that determine the final appearance of the item. The offset can either be treated as a relative value (between 0 and 1) or an absolute value (between the axis' minimum and axis' maximum). This is defined by the IsOffsetRelative property of the gradient range.

<telerikGauges:GaugeRangesDefinition>
  <telerikGauges:GaugeGradientRange From="-25" To="25" IsOffsetRelative="True">
    <telerikCommon:RadGradientStop Color="Blue" Offset="0" />
    <telerikCommon:RadGradientStop Color="Red" Offset="1" />
  </telerikGauges:GaugeGradientRange>
</telerikGauges:GaugeRangesDefinition>
<telerikGauges:GaugeRangesDefinition StartThickness="0" EndThickness="15" Offset="2">
  <telerikGauges:GaugeGradientRange From="-25" To="25">
    <telerikCommon:RadGradientStop Color="Blue" Offset="-25" />
    <telerikCommon:RadGradientStop Color="Red" Offset="25" />
  </telerikGauges:GaugeGradientRange>
</telerikGauges:GaugeRangesDefinition>

See Also