[Solved] [UWP] BarSeries labels drawn to the left of bars

[Jeremy]

I have a BarSeries in a RadCartesianChart that renders its labels incorrectly on UWP. Labels are more or less fine on Android and iOS (iOS I need to do other platform specific adjustments to, but that's unrelated to this issue).

On UWP the value labels on the BarSeries are rendered to the left of the bar instead of on top of the bar. See attached picture. Note how the value label on the first bar is cut off and cannot be seen because it extends to the left of the screen.

[Jeremy]

Forgot to post the XAML markup for the chart:

 

                                <telerikChart:RadCartesianChart x:Name="topFiveChart"
                                                                HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" 
                                                                BackgroundColor="Transparent"
                                                                Margin="0, 0, 0, 40">

                                    <!--<telerikChart:RadCartesianChart.ChartBehaviors>
                                        <telerikChart:ChartSelectionBehavior DataPointSelectionMode="Single" SeriesSelectionMode="None" />
                                    </telerikChart:RadCartesianChart.ChartBehaviors>-->

                                    <telerikChart:RadCartesianChart.HorizontalAxis>
                                        <telerikChart:CategoricalAxis LabelFitMode="MultiLine" PlotMode="BetweenTicks" MajorTickThickness="2"
                                                                      LabelTextColor="White" ShowLabels="True" />
                                    </telerikChart:RadCartesianChart.HorizontalAxis>

                                    <telerikChart:RadCartesianChart.VerticalAxis>
                                        <telerikChart:NumericalAxis Minimum="0" LabelTextColor="White" />
                                    </telerikChart:RadCartesianChart.VerticalAxis>

                                    <telerikChart:RadCartesianChart.Grid>
                                        <telerikChart:CartesianChartGrid MajorLinesVisibility="Y" MajorLineThickness="1" />
                                    </telerikChart:RadCartesianChart.Grid>

                                    <telerikChart:RadCartesianChart.Series>
                                        <telerikChart:BarSeries ItemsSource="{Binding TopFiveData}"
                                                                AllowSelect="False" 
                                                                CategoryBinding="LegendTitle" ValueBinding="Minutes" 
                                                                ShowLabels="True" LabelFormat="{}{0:F2}" />
                                    </telerikChart:RadCartesianChart.Series>

                                </telerikChart:RadCartesianChart>

[Didi]

Hi Jeremy,

Thank you for the provided image and code.

The default position of the series labels in RadChart for Xamarin is left. In order to change the position of the labels to be top (center) you will need to implement a custom renderer for UWP. I have prepared a sample example with all changes applied. Please take a look at the CustomCartesianChartRenderer.cs file inside the UWP project from the attached sample. The data labels position is set to top (center). 

Let me know if you have any other questions on this.

Regards,
Didi
Progress Telerik

[Jeremy]

Thank you, that worked. For those with the same problem, I made a few changes to the above code to handle multiple BarSeries or RadCartesianCharts with no BarSeries, but otherwise it worked great. Thanks again.