[iOS, possibly others?] DateTimeContinuousAxis: One extra tick label than can fit in some cases

[Jeremy]

So I have a RadCartesianChart with a DateTimeContinuousAxis set as the horizontal axis and a NumericalAxis set as the vertical axis, and I'm rendering a SplineAreaSeries (I've also tried an AreaSeries). The data I'm displaying ranges about 10 days, with the smallest difference between data points at about an hour, with some gaps in the data each day for a couple hour segments. I'm letting the axis auto-adjust the intervals between ticks and labels as the data being displayed can be filtered to a date range of 1-10 days.

It seems on iOS (and possibly others), sometimes it draws an extra tick label where there is no room for that tick label. This causes in some cases a jumbled up pair of labels on the right side of the horizontal axis. In the picture shown, it's still relatively readable (not really), but in some cases it can draw two labels almost right on top of each other.

I also noticed it sometimes draws the axis labels a bit differently, even with the same data, between navigations or RadTabView tab switches.

As an aside: I'd love to have the option of just drawing the horizontal axis labels vertically instead of rotated 45% or whatever it is.

Here is the XAML markup:

 

<telerikChart:RadCartesianChart x:Name="trendChart"
                                                                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:DateTimeContinuousAxis LabelFitMode="Rotate" PlotMode="BetweenTicks" 
                                                                             MajorTickThickness="2" MajorTickBackgroundColor="White"
                                                                             LabelFormat="MM/dd HH:mm" LabelTextColor="White" ShowLabels="True" />
                                    </telerikChart:RadCartesianChart.HorizontalAxis>

                                    <telerikChart:RadCartesianChart.VerticalAxis>
                                        <telerikChart:NumericalAxis Minimum="0" LabelTextColor="White" 
                                                                    MajorTickThickness="2" MajorTickBackgroundColor="White" />
                                    </telerikChart:RadCartesianChart.VerticalAxis>

                                    <telerikChart:RadCartesianChart.Grid>
                                        <telerikChart:CartesianChartGrid MajorLinesVisibility="Y" MajorLineThickness="1" />
                                    </telerikChart:RadCartesianChart.Grid>

                                    <telerikChart:RadCartesianChart.Series>
                                        <telerikChart:SplineAreaSeries StrokeThickness="2"
                                                                       Stroke="{StaticResource TrendChartLineColor}" 
                                                                       Fill="{StaticResource TrendChartFillColor}"
                                                                       LabelBinding="Label" 
                                                                       ValueBinding="Minutes"
                                                                       CategoryBinding="Timestamp"
                                                                       ShowLabels="False"
                                                                       ItemsSource="{Binding TrendData}" />
                                    </telerikChart:RadCartesianChart.Series>

                                </telerikChart:RadCartesianChart>

 

[Stefan Nenchev]

Hello, Jeremy,

Thank you for the detailed description of the issue. I was able to reproduce it. I will need some more time to investigate it in details and provide you with more information. I will update the thread once I have more information.

Regards,
Stefan Nenchev
Progress Telerik

[Jeremy]

Thank you.

Note I was able to work around the inconsistent axis drawing issue (and sometimes glitchy spline area rendering) by removing the chart from the layout after the itemsource is updated and then adding it back into the layout and forcing a layout on the root page with ForceLayout(). It's really slow but at least now it's rendering the axis and data consistently. Still getting the overlapping date time continuous axis labels on iOS though.

[Stefan Nenchev]

Hello, Jeremy,

Thank you for sharing the approach you are using to work around the issue. We have investigated the behavior but the bug seems more complicated so we would not be able to apply a fast fix. With this in mind, I suggest you follow the official report of the issue so that you are notified when there is any progress on the matter - Chart: [iOS] Extra tick is drawn when using a DateTimeContinuousAxis. I have also added some points to your account for reporting the issue. 

As for the Label's rotation angle, the angle is currently hard-coded in Xamarin.Forms and in order to change it, you can create custom renderer/effect for the different platforms and change the angle on the native axis. Here is how you can achieve this for the different platforms:

iOS

[assembly: Xamarin.Forms.ExportRenderer(typeof(Telerik.XamarinForms.Chart.RadCartesianChart), typeof(CustomChartRenderer))]
namespace iOSchartLabels.iOS.Renderers
{
    class CustomChartRenderer : CartesianChartRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<RadCartesianChart> e)
        {
            base.OnElementChanged(e);
            var nativeAxis = this.Control.XAxis as TKChartDateTimeAxis;
            nativeAxis.Style.LabelStyle.FitMode = TKChartAxisLabelFitMode.Rotate;
            nativeAxis.Style.LabelStyle.RotationAngle = new nfloat(-Math.PI/2);
        }
    }
}

Android

[assembly: Xamarin.Forms.ExportRenderer(typeof(Telerik.XamarinForms.Chart.RadCartesianChart), typeof(CustomChartRenderer))]
namespace iOSchartLabels.Android.CustomRenderers
{
    class CustomChartRenderer : CartesianChartRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<RadCartesianChart> e)
        {
            base.OnElementChanged(e);
            var nativeAxis = this.Control.HorizontalAxis as Com.Telerik.Widget.Chart.Visualization.CartesianChart.Axes.DateTimeContinuousAxis;
            nativeAxis.LabelFitMode = Com.Telerik.Widget.Chart.Engine.Axes.Common.AxisLabelFitMode.Rotate;
            nativeAxis.LabelRotationAngle = -90;
        }
    }
}

UWP

[assembly: ExportRenderer(typeof(Telerik.XamarinForms.Chart.RadCartesianChart), typeof(ChartCustomRenderer))]
namespace iOSchartLabels.UWP
{
    class ChartCustomRenderer : CartesianChartRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<RadCartesianChart> e)
        {
            base.OnElementChanged(e);
            var nativeAxis = this.Control.HorizontalAxis as Telerik.UI.Xaml.Controls.Chart.DateTimeContinuousAxis;
            nativeAxis.LabelFitMode = Telerik.Charting.AxisLabelFitMode.Rotate;
            nativeAxis.LabelRotationAngle = -90;
        }
    }
}

As you can notice the approach for Android and UWP is identical, and the one for iOS is slightly different. We already have a feature request to expose a rotation angle property in Xamarin.Forms directly. You can track its progress here - Chart: Set LabelRotationAngle for Axis Labels. I have increased its priority as per your request.

I hope the suggestion will be helpful. Have a great rest of the week.

Regards,
Stefan Nenchev
Progress Telerik