Squished category label for chart with one category on iOS?

[Valentin]

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" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             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.

[Didi]

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

[Valentin]

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