GaugeLinearAxis shows Min label but not Max label

[Jason]

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>

 

 

[Lance | Manager Technical Support]

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