Getting Started

In order to set up the gauge you need to set up the elements of the gauge you want to use. You need to set the axis minimum, maximum and step, so that the values of the indicators and the ranges are within the axis range and they can be positioned properly. Normally you will need at least one indicator, but you can add as many as needed. Adding gauge ranges is not necessary but is often valuable as they help give additional information about values within that range, for example too low, too high, or normal.

Before you proceed, please, take a look at these articles and follow the instructions to setup your app:

RadRadialGauge is rendered via the SkiaSharp graphics library so you need to install SkiaSharp.Views.Forms.

Example

Below you can see an example of a RadRadialGauge with a linear axis, two indicators and three gauge ranges.

Add the following namespaces:

xmlns:telerikCommon="clr-namespace:Telerik.XamarinForms.Common;assembly=Telerik.XamarinForms.Common"
xmlns:telerikGauges="clr-namespace:Telerik.XamarinForms.DataVisualization.Gauges;assembly=Telerik.XamarinForms.DataVisualization"
using Telerik.XamarinForms.Common;
using Telerik.XamarinForms.DataVisualization.Gauges;

Proceed with defining the component:

<telerikGauges:RadRadialGauge>
  <telerikGauges:RadRadialGauge.Axis>
    <telerikGauges:GaugeLinearAxis Minimum="0" Maximum="200" Step="25" />
  </telerikGauges:RadRadialGauge.Axis>
  <telerikGauges:RadRadialGauge.Indicators>
    <telerikGauges:GaugeNeedleIndicator Value="60" Offset="30" Position="Start" />
    <telerikGauges:GaugeShapeIndicator Value="80" />
  </telerikGauges:RadRadialGauge.Indicators>
  <telerikGauges:RadRadialGauge.Ranges>
    <telerikGauges:GaugeRangesDefinition>
      <telerikGauges:GaugeRange From="0" To="150" Color="Green" />
      <telerikGauges:GaugeGradientRange From="150" To="200">
        <telerikCommon:RadGradientStop Color="Yellow" Offset="150" />
        <telerikCommon:RadGradientStop Color="Red" Offset="200" />
      </telerikGauges:GaugeGradientRange>
    </telerikGauges:GaugeRangesDefinition>
  </telerikGauges:RadRadialGauge.Ranges>
</telerikGauges:RadRadialGauge>
RadRadialGauge gauge = new RadRadialGauge();
gauge.Axis = new GaugeLinearAxis { Minimum = 0, Maximum = 200, Step = 25 };
gauge.Indicators.Add(new GaugeNeedleIndicator { Value = 60, Offset = 30, Position = GaugeElementPosition.Start });
gauge.Indicators.Add(new GaugeShapeIndicator { Value = 80 });
gauge.Ranges.Ranges.Add(new GaugeRange { From = 0, To = 150, Color = Color.Green });
GaugeGradientRange gradientRange = new GaugeGradientRange { From = 150, To = 200 };
gradientRange.GradientStops.Add(new RadGradientStop { Color = Color.Yellow, Offset = 150 });
gradientRange.GradientStops.Add(new RadGradientStop { Color = Color.Red, Offset = 200 });
gauge.Ranges.Ranges.Add(gradientRange);

Here is the result:

Gauge example

See Also