DateTimeContinuousAxis MajorStepUnit Month Axis really buggy on iOs

[Felix]

I try to use RadCartesianChart with numerical vertical axis and DateTimes on horizontal axis.

The dates only cover the current year.

The month labels should be placed evry quater: January, April, July, October (Maybe December as the end of the scale).

Here is a minimal code example:

<telerikChart:RadCartesianChart Grid.Row="1" x:Name="line_chart"  VerticalOptions="FillAndExpand">

    <telerikChart:RadCartesianChart.BindingContext>

        <local:ViewModel />

    </telerikChart:RadCartesianChart.BindingContext>

    <telerikChart:RadCartesianChart.HorizontalAxis>

        <telerikChart:DateTimeContinuousAxis Maximum="{Binding MinDate}" Maximum="{Binding MaxDate}" PlotMode="OnTicks" LabelFormat="MMM" MajorStepUnit="Month" LabelFitMode="Rotate" MajorStep="3" />

    </telerikChart:RadCartesianChart.HorizontalAxis>

    <telerikChart:RadCartesianChart.VerticalAxis>

        <telerikChart:NumericalAxis />

    </telerikChart:RadCartesianChart.VerticalAxis>

    <telerikChart:RadCartesianChart.Series>

        <telerikChart:LineSeries ValueBinding="Value"

                     CategoryBinding="Date"

                     ItemsSource="{Binding

public class ViewModel
{
    public ObservableCollection<CategoricalData> Dates { get; set; }
    public DateTime MinDate { get; set; } = new DateTime(DateTime.Now.Year, 1, 1);
    public DateTime MaxDate { get; set; } = new DateTime(DateTime.Now.Year, 12, 31);

    public ViewModel()
    {
            Dates = new ObservableCollection<CategoricalData>();
            Dates.Add(new CategoricalData() { Date = MinDate, Value = 40 });
            Dates.Add(new CategoricalData() { Date = MaxDate, Value = 40 });
    }
}

}" />

    </telerikChart:RadCartesianChart.Series>

</telerikChart:RadCartesianChart>

 

It looks exactly correct on Android but on iOS MaxDate and MajorStep are not respected and the distances are not equidistant.

[Didi]

Hello Felix,

Thank you for the provided code.

It seems you've come across the following known issues related to the DateTimeAxis on iOS: 

https://feedback.telerik.com/xamarin/1366298-chart-ios-datetimecontinuousaxis-displays-incorrect-labels-when-majorstepunit-is-month

https://feedback.telerik.com/xamarin/1366299-chart-ios-a-needless-label-is-displayed-at-the-end-for-datetimecontinuousaxis

If you remove the MajorStep property you will notice that for some months there are two labels (March), for some months there are no labels at all (October). 

I can assure you that both issues are escalated to the development team. I have also raised their priority based on your report. 

We need time to check whether a workaround can be applied and will write with more details on a day or two at latest.

Thank you for the understanding.

Regards,
Didi
Progress Telerik

[Didi]

Hi Felix,

I have tried to find a workaround for the DateTime axis using a custom renderer and custom label formatter but without a success. 

The approach I can suggest is using the Categorical axis. I have attached a sample project, please download and test on your side. 

I am sorry for the inconvenience caused.

Regards,
Didi
Progress Telerik

[Felix]

Hi Didi,

if i run youre example on android project its initial broken (See TelerikWE.PNG).

Ive tried youre workaround in my Project. Again its completely broken (See TelerikWeMyProject.PNG).

 

Regards

Felix

 

[Didi]

Hi Felix, 

The provided workaround was for iOS. Yes, it seems that for Android the approach is not working as expected because of the type of Data property. I set it to be of type object, it should be of type DateTime. I have attached an updated version of the project. Please download and test on your side. 

I hope this solution will help you achieve the scenario you have.

Regards,
Didi
Progress Telerik