[UWP] BarSeries labels drawn to the left of bars

4 posts, 1 answers
  1. Jeremy
    Jeremy avatar
    9 posts
    Member since:
    Sep 2018

    Posted 24 Oct 2018 Link to this post

    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.

  2. Jeremy
    Jeremy avatar
    9 posts
    Member since:
    Sep 2018

    Posted 24 Oct 2018 in reply to Jeremy Link to this post

    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>

  3. Answer
    Didi
    Admin
    Didi avatar
    384 posts

    Posted 25 Oct 2018 Link to this post

    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
  4. Jeremy
    Jeremy avatar
    9 posts
    Member since:
    Sep 2018

    Posted 25 Oct 2018 Link to this post

    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.
Back to Top