can I add text to a linear gauge

1 Answer 28 Views
Gauge
Chriso
Top achievements
Rank 2
Chriso asked on 07 Dec 2025, 10:19 PM
Hi, is it possible to modify a linear gauge, so that there is text inside the various ranges? as per the example

1 Answer, 1 is accepted

Sort by
0
Denis
Telerik team
answered on 08 Dec 2025, 02:18 PM

Hello Chriso,

Thank you for the question and the provided image.

The scenario can be achieved using the GaugeTextIndicator. So mainly you have to add several indicators based on the ranges. Here is an example:

	<VerticalStackLayout HeightRequest="100">
		<!-- The Horizontal Gauge -->
		<telerik:RadHorizontalGauge HeightRequest="100">
			<telerik:RadHorizontalGauge.Axis>
				<telerik:GaugeLinearAxis Minimum="10" 
                                             Maximum="45" 
                                             Step="5"
                                             ShowLabels="True"
                                             TickThickness="1"
                                             TickPosition="End"
                                             LabelPosition="End"
                                             FontSize="16" />
			</telerik:RadHorizontalGauge.Axis>
			<telerik:RadHorizontalGauge.Indicators>
				<telerik:GaugeShapeIndicator Value="28" />
				<telerik:GaugeTextIndicator 
						 
						  Text="UNDER"
						  TextColor="White"
						  TextMargin="4" Position="Start"
						  Offset="15"
						  Value="14" />
				<telerik:GaugeTextIndicator 
				 
				  Text="NORMAL"
				  TextColor="White"
				  TextMargin="4" Position="Start"
				  Offset="15"
				  Value="20" />
				<telerik:GaugeTextIndicator 
				 
				  Text="OVER"
				  TextColor="White"
				  TextMargin="4" Position="Start"
				  Offset="15"
				  Value="27" />
				<telerik:GaugeTextIndicator 
				 
				  Text="OBESE"
				  TextColor="White"
				  TextMargin="4" Position="Start"
				  Offset="15"
				  Value="35" />
				<telerik:GaugeTextIndicator 
	 
	  Text="V. OBESE"
	  TextColor="White"
	  TextMargin="4" Position="Start"
	  Offset="15"
	  Value="42" />
			</telerik:RadHorizontalGauge.Indicators>
			<telerik:RadHorizontalGauge.Ranges>
				<telerik:GaugeRangesDefinition StartThickness="45" 
                                                   EndThickness="45"
                                                   Position="Start">
					<!-- Under: 10-18.5 - Light Blue -->
					<telerik:GaugeRange From="10" To="18.5" Color="#ADD8E6" />
					<!-- Normal: 18.5-25 - Green -->
					<telerik:GaugeRange From="18.5" To="25" Color="#8BC34A" />
					<!-- Over: 25-30 - Orange -->
					<telerik:GaugeRange From="25" To="30" Color="#FFA726" />
					<!-- Obese: 30-40 - Red -->
					<telerik:GaugeRange From="30" To="40" Color="#F44336" />
					<!-- V. Obese: 40-45 - Dark Red -->
					<telerik:GaugeRange From="40" To="45" Color="#8B0000" />
				</telerik:GaugeRangesDefinition>
			</telerik:RadHorizontalGauge.Ranges>
		</telerik:RadHorizontalGauge>
	</VerticalStackLayout>

and an image is attached.

Also I have logged a feature request on your behalf, for extending the gage ranges definition: https://feedback.telerik.com/maui/1706022-gauge-provide-option-to-set-text-in-the-gauge-ranges-definition and updated your Telerik points for this report. 

Regards,
Denis
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
Gauge
Asked by
Chriso
Top achievements
Rank 2
Answers by
Denis
Telerik team
Share this question
or