Squished category label for chart with one category on iOS?

3 posts, 1 answers
  1. Valentin
    Valentin avatar
    25 posts
    Member since:
    Jun 2018

    Posted 01 Oct 2018 Link to this post

    I have a cartesian chart with a numerical vertical axis and categorical horizontal axis.

    When the data that's feeding the chart series contains only one category, the category label appears squished on iOS. The same chart renders fine on Android. See the attached screenshots.

    I suspect this is a bug and should hopefully be fixed. In the mean time, any suggestions on whether it is possible to work around this, perhaps via a custom renderer?

    Here's the code to recreate this:

    XAML

    <?xml version="1.0" encoding="utf-8" ?>
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 xmlns:telerikChart="clr-namespace:Telerik.XamarinForms.Chart;assembly=Telerik.XamarinForms.Chart"
                 xmlns:local="clr-namespace:ChartBug"
                 x:Class="ChartBug.ChartPage">
         
        <ContentPage.BindingContext>
            <local:CategoricalViewModel/>
        </ContentPage.BindingContext>
     
        <Grid>
            <telerikChart:RadCartesianChart>
                <telerikChart:RadCartesianChart.HorizontalAxis>
                    <telerikChart:CategoricalAxis ShowLabels="True"/>
                </telerikChart:RadCartesianChart.HorizontalAxis>
                <telerikChart:RadCartesianChart.VerticalAxis>
                    <telerikChart:NumericalAxis Minimum="0" MajorStep="1" Maximum="3" ShowLabels="True"/>
                </telerikChart:RadCartesianChart.VerticalAxis>
     
                <telerikChart:RadCartesianChart.Series>
                    <telerikChart:LineSeries ItemsSource="{Binding CategoricalData}" ShowLabels="True">
                        <telerikChart:LineSeries.ValueBinding>
                            <telerikChart:PropertyNameDataPointBinding PropertyName="Value"/>
                        </telerikChart:LineSeries.ValueBinding>
                        <telerikChart:LineSeries.CategoryBinding>
                            <telerikChart:PropertyNameDataPointBinding PropertyName="Category"/>
                        </telerikChart:LineSeries.CategoryBinding>
                        <telerikChart:LineSeries.LabelBinding>
                            <telerikChart:PropertyNameDataPointBinding PropertyName="Value"/>
                        </telerikChart:LineSeries.LabelBinding>
                    </telerikChart:LineSeries>
                </telerikChart:RadCartesianChart.Series>
            </telerikChart:RadCartesianChart>
        </Grid>
    </ContentPage>

     

    Code behind

    using System.Collections.ObjectModel;
    using Xamarin.Forms;
    using Xamarin.Forms.Xaml;
     
    namespace ChartBug
    {
        [XamlCompilation(XamlCompilationOptions.Compile)]
        public partial class ChartPage : ContentPage
        {
            public ChartPage()
            {
                InitializeComponent();
            }
        }
     
        public class CategoricalData
        {
            public object Category { get; set; }
            public double Value { get; set; }
        }
     
        public class CategoricalViewModel
        {
            public CategoricalViewModel()
            {
            }
     
            public ObservableCollection<CategoricalData> CategoricalData { get; set; } = new ObservableCollection<CategoricalData>
            {
                new CategoricalData { Category = "One", Value = 1 },
                // new CategoricalData { Category = "Two", Value = 2 }
            };
        }
    }

     

    Just uncomment the second category as needed.

  2. Answer
    Didi
    Admin
    Didi avatar
    384 posts

    Posted 08 Oct 2018 Link to this post

    Hi Valentin,

    Thank you for the provided code.

    I have tested the described scenario and I reproduced the issue. It seems that the HorizontalAxisLabel is clipped on iOS when only one data is applied. I have logged this in our Feedback portal and you could follow the item on the provided link: Chart: [iOS] HorizontalAxisLabel is not visible when only one data is applied to the chart. Currently, there is no suitable workaround I could suggest. You can also find your Telerik points updated for this report.

    Let me know if you have any other questions.

    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
  3. Valentin
    Valentin avatar
    25 posts
    Member since:
    Jun 2018

    Posted 08 Oct 2018 in reply to Didi Link to this post

    Thank you for confirming. Look forward to a fix soon.
Back to Top