Rad Cartesian Chart Appearance issues

[Josh]

We are adding rad Catesian Charts to our application to display some line graphs of data. The format of the chart looks terrible on iOS. There is no line showing on the Y-axis, The data is going behind the Y-axis, the spacing of data points on the axis is not uniform. And the X-axis has extra data points on it. How can I clean up the formatting issues that I am seeing?

01.<telerikChart:RadCartesianChart x:Name="ProfitabilityChart" BindingContext="{Binding ProfitabilityGraphViewModel}">
02.                 <telerikChart:RadCartesianChart.HorizontalAxis>
03.                     <telerikChart:DateTimeContinuousAxis MajorStepUnit="Week" LabelFormat="M/dd/yy" PlotMode="OnTicks" LabelFitMode="Rotate"/>
04.                  </telerikChart:RadCartesianChart.HorizontalAxis>
05.                  <telerikChart:RadCartesianChart.VerticalAxis>
06.                      <telerikChart:NumericalAxis/>
07.                  </telerikChart:RadCartesianChart.VerticalAxis>
08.                  <telerikChart:RadCartesianChart.Series>
09.                     <telerikChart:LineSeries ShowLabels="False"
10.                                              ValueBinding="ProfitabilityValue"
11.                                              CategoryBinding="DataDate"
12.                                              ItemsSource="{Binding ProfitabilityGraphData}" />
13.                  </telerikChart:RadCartesianChart.Series>
14.             </telerikChart:RadCartesianChart>

[Didi]

Hello Josh,

Thank you for the provided image and code.

Let me get straight to the issues:

1) Regarding the Axis Label positioning, and no line for y-axis this is the expected appearance on iOS for that axis type. For more details refer to the iOS TKChart LineSeries.  The chart for android, ios and uwp are three different controls and do not have 100% matching across the platforms.

Here is the image of the Line chart example in our documentation https://docs.telerik.com/devtools/xamarin/controls/chart/series/cartesian/images/cartesian-line-series-basic-example.png - 

Solution:

If you want to have extra customization on the chart control, you should create a custom renderer for each platform. For more details about how to create custom renderer please take a look at our documentation: Chart Renderer.

and how the renderer is implemented for iOS

public class CustomChartRenderer : CartesianChartRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<RadCartesianChart> e)
        {
            base.OnElementChanged(e);
            //change y-axis label position
            this.Control.YAxis.Style.LabelStyle.TextAlignment = TKChartAxisLabelAlignment.Left;
            this.Control.YAxis.Style.LabelStyle.TextOffset = new UIOffset(10, 0);
            this.Control.YAxis.Style.LabelStyle.FirstLabelTextAlignment = TKChartAxisLabelAlignment.Left;
            this.Control.YAxis.Style.LabelStyle.FirstLabelTextOffset = new UIOffset(20, 0);

            //visualize the y-axis line
            this.Control.YAxis.Style.LineHidden = false;

        }
    }

2) the spacing of data points on the axis is not uniform. 

The Numerical axes has minimum and maximum values, you can use them to define what will be the max and min values which axes will be displayed. In addition you can use the MajorStep property that defines the step at which the major ticks are positioned on the axis. If this property is set to 0, the axis automatically calculate the step so that the data will be visualized in the best possible way.

For more details please check our help article https://docs.telerik.com/devtools/xamarin/controls/chart/axes/axes-numerical-axis#numericalaxis 

3) Extra label for x-axis - I am afraid you came across of a known issue with the DateTimeAxes on iOS.
The issues logged for the Chart DateTime Axes on iOS for extra label and tick:
https://feedback.telerik.com/xamarin/1366524-chart-ios-extra-tick-is-drawn-when-using-a-datetimecontinuousaxis 

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

Instead of DateTime Axes, I can suggest you use the Categorical Axes.

I hope the provided information was helpful.

Regards,
Didi
Progress Telerik