Labels in SfCircularGauge

3 Sep 20209 minutes to read

The CircularScale labels associate a numeric value with major scale tick marks.

Label color customization

The label color can be changed using the LabelColor property.

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

    Label-color-customization image

    Label font customization

    The label font can be customized by using the LabelTextSize, LabelTextStyle properties.

  • c#
  • SfCircularGauge circularGauge = new SfCircularGauge(this);
                ObservableCollection<CircularScale> scales = new ObservableCollection<CircularScale>();
                CircularScale scale = new CircularScale();
                scale.StartValue = 0;
                scale.EndValue = 100;
                scale.LabelTextStyle = Typeface.Create("calibri", TypefaceStyle.Italic);
                scale.LabelTextSize = 20;
                scales.Add(scale);
                circularGauge.CircularScales = scales;

    Label-font-customization image

    Setting position for labels

    The labels can be positioned far away from the ticks by using the LabelOffset property.

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

    Label-offset image

    Setting number of decimal digits for labels

    The NumberOfDecimalDigits property is used to set the number of decimal digits to be displayed in the scale labels.

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

    Number-of-decimal-digits image

    Setting postfix and prefix for labels

    You can postfix/prefix values to the scale labels by using the LabelPostfix and LabelPrefix properties, respectively.

    Label postfix

    LabelPostfix property allows you to postfix the values to the scale labels.

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

    Label-postfix image

    Label prefix

    LabelPrefix property allows you to prefix the values to the scale labels.

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

    Label-prefix image

    Edge label customization

    You can customize the edge label by using the ShowFirstLabel and ShowLastLabel properties, which are Boolean properties. The ShowFirstLabel property is used to enable or disable first label, and the ShowLastLabel property is used to enable or disable the last label in circular gauge.

  • c#
  • SfCircularGauge circularGauge = new SfCircularGauge(this);
                ObservableCollection<CircularScale> scales = new ObservableCollection<CircularScale>();
                CircularScale scale = new CircularScale();
                scale.StartValue = 0;
                scale.Interval = 1;
                scale.MinorTicksPerInterval = 5;
                scale.EndValue = 12;
                scale.StartAngle = 270;
                scale.SweepAngle = 360;
                scale.ShowFirstLabel = false;
                scales.Add(scale);
                circularGauge.CircularScales = scales;

    Label-edge-customization image

    Show labels

    The ShowLabels property is a Boolean property, which is used to enable or disable the labels in circular gauge.

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

    Show-labels image

    Setting auto angle for label

    Scale labels can be rotated automatically based on the current angle. To enable or disable the auto angle, use the EnableAutoAngle property.

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

    Auto angle image