How to change the gauge size and alignment

3 Sep 20203 minutes to read

Changing the gauge size

The CircularCoefficient property is used to change the diameter of the gauge.
This offset ranges from 0 to 1, and the default value is 1.

  • c#
  • SfCircularGauge sfCircularGauge = new SfCircularGauge(this);
        sfCircularGauge.CircularCoefficient = 0.7f;
        Header header = new Header();
        header.Text = "Speedometer";
        header.TextColor = Color.Black;
        sfCircularGauge.Headers.Add(header);
        ObservableCollection<CircularScale> scales = new ObservableCollection<CircularScale>();
        CircularScale scale = new CircularScale();
        scale.StartValue = 0;
        scale.EndValue = 100;
        NeedlePointer needlePointer = new NeedlePointer();
        needlePointer.Value = 70;
        scale.CircularPointers.Add(needlePointer);
        scales.Add(scale);
        RangePointer rangePointer = new RangePointer();
        rangePointer.RangeStart = 15;
        rangePointer.Value = 85;
        scale.CircularPointers.Add(rangePointer);
        MarkerPointer markerPointer = new MarkerPointer();
        markerPointer.Value = 70;
        markerPointer.MarkerShape = MarkerShape.Triangle;
        scale.CircularPointers.Add(markerPointer);
        CircularRange range = new CircularRange();
        range.StartValue = 0;
        range.EndValue = 50;
        scale.CircularRanges.Add(range);
        sfCircularGauge.CircularScales = scales;

    Xamarin Circular Coefficient Image

    Gauge alignment

    The IsCenterAligned property is used to align the gauge to the center and adjust it radius based on available size. In semi-circular gauge, bottom space will be removed using the IsCenterAligned property.

  • c#
  • SfCircularGauge sfCircularGauge = new SfCircularGauge(this);
        sfCircularGauge.IsCenterAligned = true;
        ObservableCollection<CircularScale> scales = new ObservableCollection<CircularScale>();
        CircularScale scale = new CircularScale();
        scale.StartValue = 0;
        scale.EndValue = 100;
        scale.StartAngle = 180;
        scale.SweepAngle = 180;
        NeedlePointer needlePointer = new NeedlePointer();
        needlePointer.Value = 70;
        scale.CircularPointers.Add(needlePointer);
        scales.Add(scale);
        sfCircularGauge.CircularScales = scales;

    Xamarin Circular IsCenterAligned Image