Xamarin Forms Chart not Rendering on Android properly

[Zeeshan]

Hi, the following test charting does not show Date/Category axis on android as it is showing well on WP (See attached files); can anybody tell me why?

01.using System;
02.using System.Collections.Generic;
03.using System.Linq;
04.using System.Text;
05.using System.Threading.Tasks;
06.using Telerik.XamarinForms.Chart;
07.using TelerikTests.ViewModel;
08.using Xamarin.Forms;
09.
10.namespace TelerikTests.View
11.{
12.    public class ChartViewModel
13.    {
14.        private static Random random = new Random();
15.
16.
17.        public ChartViewModel()
18.        {
19.            this.Data = GetDateTimeData(10);
20.        }
21.
22.        public List<TemporalData> Data { get; set; }
23.
24.        public string Title { get; set; }
25.        public static List<TemporalData> GetDateTimeData(int itemsCount)
26.        {
27.            var startDate = DateTime.Now.AddYears(-1);
28.
29.            var items = new List<TemporalData>();
30.            for (int i = 0; i < itemsCount; i++)
31.            {
32.                var data = new TemporalData();
33.                data.Category = startDate.AddDays(i);
34.                data.Value = random.Next(10, 30);
35.
36.                items.Add(data);
37.            }
38.
39.            return items;
40.        }
41.    }
42.    public class ChartPage :
43.        ContentPage
44.    {
45.        public ChartPage()
46.        {
47.            this.BindingContext = new ChartViewModel() { Title="test"};
48.            this.BackgroundColor = Device.OnPlatform
49.                (
50.                    Color.White, Color.White, Color.Transparent
51.                );
52.            var chart=CreateChart();
53.            chart.HeightRequest = 300;
54.            this.Content = chart;
55.        }
56.
57.        private static RadCartesianChart CreateChart()
58.        {
59.            var chart = new RadCartesianChart
60.            {
61.                HorizontalAxis = new Telerik.XamarinForms.Chart.DateTimeContinuousAxis() {
62.                    GapLength = 0.5,
63.                    MajorStep=1,
64.                    MajorStepUnit = TimeInterval.Day,
65.                    LabelFitMode = AxisLabelFitMode.Rotate,
66.                    ShowLabels = true
67.                    //PlotMode = AxisPlotMode.BetweenTicks
68.                },
69.                VerticalAxis = new Telerik.XamarinForms.Chart.NumericalAxis(),
70.            };
71.
72.            var series = CreateSeries();
73.            series.DisplayName = "TEst";
74.
75.            chart.Series.Add(series);
76.            return chart;
77.        }
78.
79.        private static AreaSeries CreateSeries()
80.        {
81.            var series = new Telerik.XamarinForms.Chart.AreaSeries();
82.            series.SetBinding(CategoricalSeries.ItemsSourceProperty, new Binding("Data"));
83.
84.            series.ValueBinding = new Telerik.XamarinForms.Chart.PropertyNameDataPointBinding
85.            {
86.                PropertyName = "Value"
87.            };
88.
89.            series.CategoryBinding = new Telerik.XamarinForms.Chart.PropertyNameDataPointBinding
90.            {
91.                PropertyName = "Category"
92.            };
93.
94.            return series;
95.        }
96.    }
97.}

[Ves]

Hi Zeeshan,

Please, specify a LabelFormat for the axis. It may look like this "dd-MM-yyyy". This way the labels will be shown as expected. As a side note, I am afraid there is a problem with MajorStep/MajorStepUnit pair of properties at the moment.  The axis might not show correctly in some cases. You can skip setting them for the moment, here is how your axis definition can look like:

​

HorizontalAxis = new Telerik.XamarinForms.Chart.DateTimeContinuousAxis()
                {
                   LabelFitMode = AxisLabelFitMode.Rotate,
                    ShowLabels = true,
                    //PlotMode = AxisPlotMode.BetweenTicks,
                    LabelFormat = "dd-MM-yyyy"
                },

Best regards,
Ves
Telerik

[Zeeshan]

Now my problem is why chart is displaying differently on all 3 platforms while the chart code is the same?

01.var chartView = new Grid()
02.            {
03.                RowDefinitions =
04.                {
05.                    new RowDefinition { Height = GridLength.Auto },
06.                    new RowDefinition { Height = Device.OnPlatform(300, 500, 500) }
07.                },
08.                ColumnSpacing = 0
09.            };
10.
11.            var chart = new RadCartesianChart
12.            {
13.                //BackgroundColor=Color.Aqua,
14.                HorizontalAxis = new Telerik.XamarinForms.Chart.DateTimeContinuousAxis()
15.                {
16.                    LabelTextColor = Color.White,
17.                    //MajorStep = 1,
18.                    //MajorStepUnit = TimeInterval.Hour,
19.                    LabelFitMode = AxisLabelFitMode.Rotate,
20.                    LabelFormat = "dd/mm/yy hh:mm",
21.                    ShowLabels = true,
22.                },
23.                VerticalAxis = new Telerik.XamarinForms.Chart.NumericalAxis() {
24.                    LabelTextColor = Color.White
25.                },
26.            };

[Pavel R. Pavlov]

Hello Zeeshan,

The reason why the same data is represented differently in the different platforms is the fact we are not changing the default behavior of the native controls throughout the platforms. In this particular case it seems that there is no range defined for the NumericalAxis hence the underlying native controls (for iOS and WP) decide what the range should be. If you need to define the same look of the data throughout the different platforms you will need to set all the properties of the series, axes and charting components. This is the only way to ensure all the same settings are applied to all platforms. If there is any property that has not been set in your project, the native component will be initialized with its default value and those values may be different for the different platforms.

Please try to set the Minimum and Maximum properties for the NumericalAxis in your project and let us know how it goes.

I hope this answers your question. Do not hesitate to contact us again if you need any further assistance.

Regards,
Pavel R. Pavlov
Telerik