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

[UWP] BarSeries labels drawn to the left of bars

3 Answers 19 Views
This is a migrated thread and some comments may be shown as answers.
Jeremy
Top achievements
Rank 1
Jeremy asked on 24 Oct 2018, 01:33 PM

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.

3 Answers, 1 is accepted

Sort by
0
Jeremy
Top achievements
Rank 1
answered on 24 Oct 2018, 01:38 PM

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>

0
Accepted
Didi
Telerik team
answered on 25 Oct 2018, 01:43 PM
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
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
0
Jeremy
Top achievements
Rank 1
answered on 25 Oct 2018, 07:28 PM
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.
Tags
Chart
Asked by
Jeremy
Top achievements
Rank 1
Answers by
Jeremy
Top achievements
Rank 1
Didi
Telerik team
Share this question
or