Scales in SfLinearGauge

19 Oct 202016 minutes to read

CircularScales contain a collection of CircularScale elements, which integrates labels, tick marks, and a rim to customize the basic look and feel of the circular gauge.

Scale

CircularScale contains the sub elements such as rim, ticks, labels, ranges, and pointers. It defines the radius, start angle, sweep direction, sweep angle, overall minimum and maximum values, frequency of labels, and tick marks. It will have multiple ranges.

A range is a visual element, which begins and ends at specified values within a CircularScale. It will have one or more pointers to point out the values in scale.

  • c#
  • SfCircularGauge circularGauge = new SfCircularGauge(this);
                ObservableCollection<CircularScale> scales = new ObservableCollection<CircularScale>();
                CircularScale scale = new CircularScale();
                scale.StartValue = 0;
                scale.EndValue = 100;
                scales.Add(scale);
                circularGauge.CircularScales = scales;

    Circular Scale Image

    Setting start and end values for scale

    The StartValue and EndValue properties allow you to set the start and end values for scale.

  • c#
  • SfCircularGauge circularGauge = new SfCircularGauge(this);
                ObservableCollection<CircularScale> scales = new ObservableCollection<CircularScale>();
                CircularScale scale = new CircularScale();
                scale.StartValue = -30;
                scale.EndValue = 50;
                scales.Add(scale);
                circularGauge.CircularScales = scales;

    Start-end-value image

    Setting start and sweep angles for scale

    The StartAngle and SweepAngle properties allow you to set the start and end angles for scale.

  • c#
  • SfCircularGauge circularGauge = new SfCircularGauge(this);
                ObservableCollection<CircularScale> scales = new ObservableCollection<CircularScale>();
                CircularScale scale = new CircularScale();
                scale.StartValue = 0;
                scale.EndValue = 100;
                scale.StartAngle = 185;
                scale.SweepAngle = 270;
                scales.Add(scale);
                circularGauge.CircularScales = scales;

    Start-end-angle imahe

    Setting interval for scale

    The Interval property allows you to set the interval for scale.

  • c#
  • SfCircularGauge circularGauge = new SfCircularGauge(this);
                ObservableCollection<CircularScale> scales = new ObservableCollection<CircularScale>();
                CircularScale scale = new CircularScale();
                scale.StartValue = 0;
                scale.EndValue = 500;
                scale.Interval = 100;
                scales.Add(scale);
                circularGauge.CircularScales = scales;

    Interval image

    Setting auto interval for scale

    By default, the interval value is calculated by 10. By using the EnableAutoInterval property, you can set auto interval based on the start and end values.

  • c#
  • SfCircularGauge circularGauge = new SfCircularGauge(this);
                ObservableCollection<CircularScale> scales = new ObservableCollection<CircularScale>();
                CircularScale scale = new CircularScale();
                scale.StartValue = 0;
                scale.EndValue = 500;
                scale.EnableAutoInterval = true;
                scales.Add(scale);
                circularGauge.CircularScales = scales;

    Auto-interval image

    Setting scale direction for scale

    The Direction property allows you to render the gauge scale in either clockwise or counterclockwise direction.

  • c#
  • SfCircularGauge circularGauge = new SfCircularGauge(this);
                ObservableCollection<CircularScale> scales = new ObservableCollection<CircularScale>();
                CircularScale scale = new CircularScale();
                scale.StartValue = 0;
                scale.EndValue = 100;
                scale.Direction = Com.Syncfusion.Gauges.SfCircularGauge.Enums.ScaleDirection.AntiClockwise;
                scales.Add(scale);
                circularGauge.CircularScales = scales;

    Scale-direction image

    Setting multiple scales for scale

    It helps you to add multiple scales to the same circular gauge. You can customize all the scales in a CircularScales collection.

  • c#
  • SfCircularGauge circularGauge = new SfCircularGauge(this);
                ObservableCollection<CircularScale> scales = new ObservableCollection<CircularScale>();
                CircularScale scale = new CircularScale();
                scale.StartValue = 0;
                scale.EndValue = 240;
                scale.Interval = 20;
                scale.MinorTicksPerInterval = 1;
                scale.RimColor = Color.ParseColor("#C62E0A");
                scale.LabelOffset = 0.88;
                scale.LabelColor = Color.ParseColor("#C62E0A");
                scale.ScaleStartOffset = 0.7;
                scale.ScaleEndOffset = 0.69;
    
                TickSetting majorTicks = new TickSetting();
                majorTicks.StartOffset = 0.7;
                majorTicks.EndOffset = 0.77;
                majorTicks.Width = 2;
                majorTicks.Color = Color.ParseColor("#C62E0A");
                scale.MajorTickSettings = majorTicks;
    
                TickSetting minorTicks = new TickSetting();
                minorTicks.StartOffset = 0.7;
                minorTicks.EndOffset = 0.75;
                minorTicks.Width = 2;
                minorTicks.Color = Color.ParseColor("#C62E0A");
                scale.MinorTickSettings = minorTicks;
                scales.Add(scale);
    
                CircularScale circularScale = new CircularScale();
                circularScale.StartValue = 0;
                circularScale.EndValue = 160;
                circularScale.Interval = 40;
                circularScale.MinorTicksPerInterval = 1;
                circularScale.RimColor = Color.ParseColor("#333333");
                circularScale.LabelOffset = 0.45;
                circularScale.LabelColor = Color.ParseColor("#333333");
                circularScale.ScaleStartOffset = 0.65;
                circularScale.ScaleEndOffset = 0.64;
    
                TickSetting majorTick = new TickSetting();
                majorTick.StartOffset = 0.64;
                majorTick.EndOffset = 0.57;
                majorTick.Width = 2;
                majorTick.Color = Color.ParseColor("#333333");
                circularScale.MajorTickSettings = majorTick;
    
                TickSetting minorTick = new TickSetting();
                minorTick.StartOffset = 0.64;
                minorTick.EndOffset = 0.59;
                minorTick.Width = 2;
                minorTick.Color = Color.ParseColor("#333333");
                circularScale.MinorTickSettings = minorTick;
    
                scales.Add(circularScale);
                circularGauge.CircularScales = scales;

    Multiple-scale image

    Calculate radius and center based on angle

    This feature is used to automatically adjust the radius and center of a circular gauge based on the StartAngle and SweepAngle properties by enable the IsCenterAligned property of gauge.

    NOTE

    Default value of the IsCenterAligned property is false.

  • c#
  • SfCircularGauge sfCircularGauge = new SfCircularGauge(this);
                ObservableCollection<CircularScale> circularScales = new ObservableCollection<CircularScale>();
                sfCircularGauge.IsCenterAligned = true;
                CircularScale scale = new CircularScale();
                scale.EnableAutoAngle = true;
                scale.StartAngle = 180;
                scale.SweepAngle = 180;
                scale.StartValue = 0;
                scale.EndValue = 1000;
                scale.Interval = 500;
                scale.EnableAutoInterval = true;
                scale.RimWidth = 15;
                scale.LabelColor = Color.Black;
                scale.LabelTextSize = 10;
                ObservableCollection<CircularPointer> pointers = new ObservableCollection<CircularPointer>();
                NeedlePointer needlePointer = new NeedlePointer();
                needlePointer.Value = 500;
                needlePointer.Color = Color.ParseColor("#666666");
                needlePointer.Type =NeedleType.Triangle;
                needlePointer.LengthFactor = 0.7;
                needlePointer.KnobStrokeWidth = 10;
                needlePointer.KnobRadius = 15;
                needlePointer.KnobStrokeColor = Color.Aqua;
                needlePointer.KnobStrokeWidth = 8;
                needlePointer.KnobColor = Color.White;
                needlePointer.KnobRadiusFactor = 0.1;
                pointers.Add(needlePointer);
                MarkerPointer markerPointer = new MarkerPointer();
                markerPointer.MarkerShape = Com.Syncfusion.Gauges.SfCircularGauge.Enums.MarkerShape.InvertedTriangle;
                markerPointer.Value = 300;
                markerPointer.Color = Color.Brown;
                markerPointer.MarkerHeight = 30;
                markerPointer.MarkerWidth = 30;
                markerPointer.Offset = 1;
                pointers.Add(markerPointer);
                RangePointer rangePointer = new RangePointer();
                rangePointer.RangeCap = RangeCap.Both;
                rangePointer.Value = 1000;
                rangePointer.Color = Color.Brown;
                rangePointer.Width = 15;
                rangePointer.Offset = 0.5;
                pointers.Add(rangePointer);
                scale.CircularPointers = pointers;
                circularScales.Add(scale);
                sfCircularGauge.CircularScales = circularScales;
                sfCircularGauge.SetBackgroundColor(Color.White);
                SetContentView(sfCircularGauge);

    Center Aligned SfCircularGauge image

    See also

    How to set start and sweep angles for scale

    How to use a circular gauge control as a circular progress bar

    How to design a fuel meter using circular gauge