Header

3 Sep 20204 minutes to read

The Header support allows you to show text, image, or any UI content inside the gauge control. A circular gauge can be made self-descriptive about the data. It can be measured with use of the header.

Adding header in circular gauge

Header

The Header can be used to set a unique header for the circular gauge. You can add text as headers in a circular gauge. Multiple headers also can be added in a circular gauge.

C#

SfCircularGauge circularGauge = new SfCircularGauge(this);
            Header header = new Header();
            header.Text = "Speedometer";
            header.TextColor = Color.Black;
            circularGauge.Headers.Add(header);
            ObservableCollection<CircularScale> scales = new ObservableCollection<CircularScale>();
            CircularScale scale = new CircularScale();
            scale.StartValue = 0;
            scale.EndValue = 100;
            scales.Add(scale);
            circularGauge.CircularScales = scales;

Setting position for header

The Position property is used to place the header in a circular gauge. The value for Position should be specified in offset value. In the Point value, which has been given for the Position, first value represent x-coordinate and second value represents y-coordinate. By default, it is placed at (0.5, 0.7).

C#

SfCircularGauge circularGauge = new SfCircularGauge(this);
            Header header = new Header();
            header.Text = "Speedometer";
            header.TextColor = Color.Black;
            header.Position = new PointF((float)0.5,(float) 0.5);
            circularGauge.Headers.Add(header);
            ObservableCollection<CircularScale> scales = new ObservableCollection<CircularScale>();
            CircularScale scale = new CircularScale();
            scale.StartValue = 0;
            scale.EndValue = 100;
            scales.Add(scale);
            circularGauge.CircularScales = scales;

Customization of header

You can customize the header’s text by using the TextStyle, TextColor and TextSize properties.

C#

SfCircularGauge circularGauge = new SfCircularGauge(this);
            Header header = new Header();
            header.Text = "Speedometer";
            header.TextSize = 20;
            header.TextStyle = Typeface.Create("calibri", TypefaceStyle.Italic);
            header.TextColor = Color.Blue;
            circularGauge.Headers.Add(header);
            ObservableCollection<CircularScale> scales = new ObservableCollection<CircularScale>();
            CircularScale scale = new CircularScale();
            scale.StartValue = 0;
            scale.EndValue = 100;
            scales.Add(scale);
            circularGauge.CircularScales = scales;