Gague are cutted

1 Answer 57 Views
Gauge
Daniel
Top achievements
Rank 1
Silver
Bronze
Daniel asked on 07 Mar 2022, 07:43 AM | edited on 07 Mar 2022, 07:44 AM

Hi,

 

  <ContentView.Content>
        <Grid RowDefinitions="auto, auto, auto,*" ColumnDefinitions="*">
            <Grid Grid.Row="0" Grid.Column="0" ColumnDefinitions="*,auto,auto,auto,auto,*" ColumnSpacing="45">
                <telerikGauges:RadRadialGauge x:Name="gaugeTotalFiles" Grid.Column="1" >
                    <telerikGauges:RadRadialGauge.Axis>
                        <telerikGauges:GaugeLinearAxis Maximum="200"
                                     Minimum="0"
                                     Step="25" />
                    </telerikGauges:RadRadialGauge.Axis>
                    <telerikGauges:RadRadialGauge.Indicators>
                        <telerikGauges:GaugeNeedleIndicator Offset="30" Value="60" />
                        <telerikGauges:GaugeShapeIndicator Value="80" />
                    </telerikGauges:RadRadialGauge.Indicators>
                    <telerikGauges:RadRadialGauge.Ranges>
                        <telerikGauges:GaugeRangesDefinition>
                            <telerikGauges:GaugeRange Color="#03446a"
                                    From="0"
                                    To="200" />
                          </telerikGauges:GaugeRangesDefinition>
                    </telerikGauges:RadRadialGauge.Ranges>
                </telerikGauges:RadRadialGauge>
                <telerikGauges:RadRadialGauge x:Name="gaugePushFiles" Grid.Column="2">
                    <telerikGauges:RadRadialGauge.Axis>
                        <telerikGauges:GaugeLinearAxis Maximum="200"
                                     Minimum="0"
                                     Step="25" />
                    </telerikGauges:RadRadialGauge.Axis>
                    <telerikGauges:RadRadialGauge.Indicators>
                        <telerikGauges:GaugeNeedleIndicator Offset="30" Value="60" />
                        <telerikGauges:GaugeShapeIndicator Value="80" />
                    </telerikGauges:RadRadialGauge.Indicators>
                    <telerikGauges:RadRadialGauge.Ranges>
                        <telerikGauges:GaugeRangesDefinition>
                            <telerikGauges:GaugeRange Color="#03446a"
                                    From="0"
                                    To="200" />
                        </telerikGauges:GaugeRangesDefinition>
                    </telerikGauges:RadRadialGauge.Ranges>
                </telerikGauges:RadRadialGauge>
                <telerikGauges:RadRadialGauge x:Name="gaugeTotalPulled" Grid.Column="3">
                    <telerikGauges:RadRadialGauge.Axis>
                        <telerikGauges:GaugeLinearAxis Maximum="200"
                                     Minimum="0"
                                     Step="25" />
                    </telerikGauges:RadRadialGauge.Axis>
                    <telerikGauges:RadRadialGauge.Indicators>
                        <telerikGauges:GaugeNeedleIndicator Offset="30" Value="60" />
                        <telerikGauges:GaugeShapeIndicator Value="80" />
                    </telerikGauges:RadRadialGauge.Indicators>
                    <telerikGauges:RadRadialGauge.Ranges>
                        <telerikGauges:GaugeRangesDefinition>
                            <telerikGauges:GaugeRange Color="#03446a"
                                    From="0"
                                    To="200" />
                        </telerikGauges:GaugeRangesDefinition>
                    </telerikGauges:RadRadialGauge.Ranges>
                </telerikGauges:RadRadialGauge>
                <telerikGauges:RadRadialGauge x:Name="gaugeTotalFailed" Grid.Column="4">
                    <telerikGauges:RadRadialGauge.Axis>
                        <telerikGauges:GaugeLinearAxis Maximum="200"
                                     Minimum="0"
                                     Step="25" />
                    </telerikGauges:RadRadialGauge.Axis>
                    <telerikGauges:RadRadialGauge.Indicators>
                        <telerikGauges:GaugeNeedleIndicator Offset="30" Value="60" />
                        <telerikGauges:GaugeShapeIndicator Value="80" />
                    </telerikGauges:RadRadialGauge.Indicators>
                    <telerikGauges:RadRadialGauge.Ranges>
                        <telerikGauges:GaugeRangesDefinition>
                            <telerikGauges:GaugeRange Color="#03446a"
                                    From="0"
                                    To="200" />
                        </telerikGauges:GaugeRangesDefinition>
                    </telerikGauges:RadRadialGauge.Ranges>
                </telerikGauges:RadRadialGauge>
            </Grid>
        </Grid>
    </ContentView.Content>

 

 

1 Answer, 1 is accepted

Sort by
0
Nikola
Telerik team
answered on 11 Mar 2022, 10:07 AM

Hello Daniel,

Thank you for sharing the problem with us. I have reviewed the code and noticed that the issue occurs because of the needle indicator and shape indicator offset values. 

I have changed the NeedleIndicator Offset and add an offset to the ShapeIndicator and after the changes the gauge labels are displayed as expected. Add the following offset for each gauge and test on your side:

<telerikGauges:GaugeNeedleIndicator Offset="40" Value="60" />
<telerikGauges:GaugeShapeIndicator Offset="30" Value="80" />

I attached an image to show you the results. I hope this solution will be of help.

Regards, Nikola 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
Daniel
Top achievements
Rank 1
Silver
Bronze
Answers by
Nikola
Telerik team
Share this question
or