This is a migrated thread and some comments may be shown as answers.

GaugeLinearAxis shows Min label but not Max label

1 Answer 86 Views

Gauges

This is a migrated thread and some comments may be shown as answers.

Jason asked on 10 Jun 2019, 05:12 PM

simulator-screen-shot---iphone-xʀ---2019-06-10-at-11-56-37.png

I have a RadRadialGauge that is working almost exactly like my client wants. I have one issue - the max value label does not display, but the min value ("0 %") does. How can I make the max value label display? And is it possible for control the font sized used by the label?

<telerikGauges:RadRadialGauge Margin="0" Padding="0" BackgroundColor="Yellow" x:Name="gauge" HeightRequest="150" WidthRequest="150">

<telerikGauges:RadRadialGauge.Axis>

<telerikGauges:GaugeLinearAxis ShowLabels="true" LabelFormat="P0" Maximum="{Binding GaugeMax}" Minimum="0" Step="10" StrokeThickness="0" />

</telerikGauges:RadRadialGauge.Axis>

<telerikGauges:RadRadialGauge.Indicators>

<telerikGauges:GaugeBarIndicator StartThickness="8" EndThickness="8" Value="{Binding GaugeMax}" Fill="#55A0A0A0" />

<telerikGauges:GaugeBarIndicator Fill="#d5715b" StartThickness="8" EndThickness="8" Value="{Binding FarmTurnoverLast12Mo}" StartCap="Flat" EndCap="Flat" IsOffsetRelative="true">

</telerikGauges:GaugeBarIndicator>

<telerikGauges:GaugeBarIndicator StartThickness="8" EndThickness="8" Value="{Binding GaugeMax}" Fill="#55A0A0A0" Offset="15" />

<telerikGauges:GaugeBarIndicator Fill="#ac5b49" StartThickness="8" EndThickness="8" Value="{Binding ZipTurnoverLast12Mo}" Offset="15" StartCap="Flat" EndCap="Flat" IsOffsetRelative="true">

</telerikGauges:GaugeBarIndicator>

<telerikGauges:GaugeBarIndicator StartThickness="8" EndThickness="8" Value="{Binding GaugeMax}" Fill="#55A0A0A0" Offset="25" />

<telerikGauges:GaugeBarIndicator Fill="#e2a294" StartThickness="8" EndThickness="8" Value="{Binding CountyTurnoverLast12Mo}" Offset="25" StartCap="Flat" EndCap="Flat" IsOffsetRelative="true">

</telerikGauges:GaugeBarIndicator>

</telerikGauges:RadRadialGauge.Indicators>

</telerikGauges:RadRadialGauge>

1 Answer, 1 is accepted

answered on 10 Jun 2019, 10:55 PM

Hello Jason,

You can show more or less labels by setting the GaugeLinearAxis LabelInterval property. Since I don't have your actual data to get a precise setting for you, I'll make a guess that I think will give you a good head start.

You typically want to match the label interval with the ticket step, that way there's a label at each theoretical step.

<telerikGauges:GaugeLinearAxis

ShowLabels="true"

LabelInterval="10"

LabelFormat="P0"

LabelOffset="0"

Maximum="{Binding GaugeMax}"

Minimum="0"

Step="10"

StrokeThickness="0" />

Example

I hard coded some values in, added the LabelIterval, set FontSize and LabelOffset to get the result seen in this screenshot.

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

xmlns:local="clr-namespace:AxisLabelTest.Portable"

xmlns:telerikGauges="clr-namespace:Telerik.XamarinForms.DataVisualization.Gauges;assembly=Telerik.XamarinForms.DataVisualization"

x:Class="AxisLabelTest.Portable.MainPage">

<Grid>

<telerikGauges:RadRadialGauge Margin="0"

Padding="0"

BackgroundColor="Yellow"

HorizontalOptions="Center"

VerticalOptions="Center"

x:Name="gauge"

HeightRequest="150"

WidthRequest="150">

<telerikGauges:RadRadialGauge.Axis>

<telerikGauges:GaugeLinearAxis ShowLabels="true"

LabelInterval="1"

LabelFormat="P0"

FontSize="15"

Maximum="1"

Minimum="0"

Step="1"

StrokeThickness="0"

LabelOffset="-5" />

</telerikGauges:RadRadialGauge.Axis>

<telerikGauges:RadRadialGauge.Indicators>

<telerikGauges:GaugeBarIndicator StartThickness="8"

EndThickness="8"

Value="1"

Fill="#55A0A0A0" />

<telerikGauges:GaugeBarIndicator Fill="#d5715b"

StartThickness="8"

EndThickness="8"

Value="0.75"

StartCap="Flat"

EndCap="Flat"

IsOffsetRelative="true">

</telerikGauges:GaugeBarIndicator>

<telerikGauges:GaugeBarIndicator StartThickness="8"

EndThickness="8"

Value="1"

Fill="#55A0A0A0"

Offset="15" />

<telerikGauges:GaugeBarIndicator Fill="#ac5b49"

StartThickness="8"

EndThickness="8"

Value="0.65"

Offset="15"

StartCap="Flat"

EndCap="Flat"

IsOffsetRelative="true">

</telerikGauges:GaugeBarIndicator>

<telerikGauges:GaugeBarIndicator StartThickness="8"

EndThickness="8"

Value="1"

Fill="#55A0A0A0"

Offset="25" />

<telerikGauges:GaugeBarIndicator Fill="#e2a294"

StartThickness="8"

EndThickness="8"

Value="0.80"

Offset="25"

StartCap="Flat"

EndCap="Flat"

IsOffsetRelative="true">

</telerikGauges:GaugeBarIndicator>

</telerikGauges:RadRadialGauge.Indicators>

</telerikGauges:RadRadialGauge>

</Grid>

</ContentPage>

Ultimately, you'll still need to tweak this to get the exact results you want, but those properties should be all you need.

Regards,
Lance | Technical Support Engineer, Principal
Progress Telerik

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items