Product Bundles
DevCraft
All Telerik .NET and Kendo UI JavaScript components and AI Tools in one package.
Kendo UI
Bundle of AI Tools plus four JavaScript UI libraries built natively for jQuery, Angular, React and Vue.
Telerik
Build great .NET business apps
.Net Web
Cross-Platform
Desktop
Reporting and Documents
Testing & Mocking
Debugging
Build JavaScript UI
Javascript
AI for Developers & IT
Ensure AI program success
AI Coding
Additional Tools
Enhance the developer and designer experience
UI/UX Tools
Free Tools
CMS
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.