Tick Setting

13 Jan 20257 minutes to read

The TickSetting property helps you to identify the gauge’s data value by marking the gauge scale in regular increments.

Show ticks for scale

The ShowTicks property allows you to enable or disable the ticks of 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.ShowTicks = false;
                circularGauge.CircularScales.Add(scale);

    Circular gauge show tick image

    Ticks customization

    The Interval property is used to calculate the tick counts for a scale. Similar to ticks, minor ticks are calculated by using the MinorTicksPerInterval property.

    Color and thickness of the tick are set by using the Color and Width UI properties. You can also customize the length of the ticks by using the Size property. First, you should set the Offset property for ticks, then increase the size of the ticks.

    Customize major ticks for scale

  • C#
  • SfCircularGauge circularGauge = new SfCircularGauge(this);
                ObservableCollection<CircularScale> scales = new ObservableCollection<CircularScale>();
                CircularScale scale = new CircularScale();
                scale.StartValue = 0;
                scale.EndValue = 100;
                TickSetting majorTicks = new TickSetting();
                majorTicks.Size = 15;
                majorTicks.Color = Color.Brown;
                majorTicks.Width = 4;
                majorTicks.Offset = 0.97;
                scale.MajorTickSettings = majorTicks;
                circularGauge.CircularScales.Add(scale);

    Circular gauge tick customization image

    Customize minor ticks for scale

  • C#
  • SfCircularGauge circularGauge = new SfCircularGauge(this);
                ObservableCollection<CircularScale> scales = new ObservableCollection<CircularScale>();
                CircularScale scale = new CircularScale();
                scale.StartValue = 0;
                scale.EndValue = 100;
                TickSetting minorTicks = new TickSetting();
                minorTicks.Size = 4;
                minorTicks.Color = Color.SkyBlue;
                minorTicks.Width = 4;
                minorTicks.Offset = 0.97;
                scale.MinorTickSettings = minorTicks;
                circularGauge.CircularScales.Add(scale);

    Circular gauge minor tick scale image

    Setting position for ticks

    The major and minor ticks can be positioned far away from the rim by using the following two ways:

    1.Offset property.
    2.StartOffset and EndOffset properties.

    Setting offset for scale

  • C#
  • SfCircularGauge circularGauge = new SfCircularGauge(this);
                ObservableCollection<CircularScale> scales = new ObservableCollection<CircularScale>();
                CircularScale scale = new CircularScale();
                scale.StartValue = 0;
                scale.EndValue = 100;
                TickSetting majorTicks = new TickSetting();
                majorTicks.Offset = 0.5;
                scale.MajorTickSettings = majorTicks;
                TickSetting minorTicks = new TickSetting();
                minorTicks.Offset = 0.5;
                scale.MinorTickSettings = minorTicks;
                circularGauge.CircularScales.Add(scale);

    Circular gauge offset scale image

    Setting scale start and end offset for scale

  • C#
  • SfCircularGauge circularGauge = new SfCircularGauge(this);
                ObservableCollection<CircularScale> scales = new ObservableCollection<CircularScale>();
                CircularScale scale = new CircularScale();
                scale.StartValue = 0;
                scale.EndValue = 100;
                TickSetting majorTicks = new TickSetting();
                majorTicks.StartOffset = 0.3;
                majorTicks.EndOffset = 0.4;
                scale.MajorTickSettings = majorTicks;
                TickSetting minorTicks = new TickSetting();
                minorTicks.StartOffset = 0.3;
                minorTicks.EndOffset = 0.35;
                scale.MinorTickSettings = minorTicks;
                circularGauge.CircularScales.Add(scale);

    Circular gauge start and end offset image