Product Bundles
DevCraft
All Telerik .NET tools and Kendo UI JavaScript components in one package. Now enhanced with:
Web
Mobile
Document Management
Desktop
Reporting
Testing & Mocking
CMS
AI Productivity Tools
UI/UX Tools
Debugging
Free Tools
Support and Learning
Docs & Resources
Productivity and Design Tools
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.