Chart Lines Y-axis text alignment

[ignacio]

Excuse my poor level of English. :-(

In the attached images, one can see that the graph generated in Android is correct, but in IOS the Y-axis alignment is incorrect.

The code is as follows.

01.<!--Grafico TiempoReal-->
02.                    <Label x:Name="lblConsumRealTime" Style="{StaticResource AppLabelChartTitle} "  Grid.Row="0" Grid.Column="0" />
03.                    <telerikChart:RadCartesianChart  x:Name="chartNeighConsumTimeReal"  Grid.Row ="1" Grid.Column="0"  >       <!--SelectionPaletteName= "LightSelected"-->
04.                        <telerikChart:RadCartesianChart.ChartBehaviors>
05.                            <telerikChart:ChartTooltipBehavior TriggerMode="Tap"/>
06.                        </telerikChart:RadCartesianChart.ChartBehaviors>
07.                        <telerikChart:RadCartesianChart.HorizontalAxis >
08.                            <telerikChart:DateTimeContinuousAxis  LabelFontSize="8" MajorStepUnit="Hour"  LabelFormat="dd hh:mm" LabelFitMode="Rotate"   />
09.                        </telerikChart:RadCartesianChart.HorizontalAxis>
10.                        <telerikChart:RadCartesianChart.VerticalAxis>
11.                            <telerikChart:NumericalAxis/>
12.                        </telerikChart:RadCartesianChart.VerticalAxis>
13.                        <telerikChart:RadCartesianChart.Series>
14.                            <!--Serie 1-->
15.                            <telerikChart:LineSeries   Stroke="Red" StrokeThickness="2" DisplayName="*Elec" ItemsSource="{Binding DataConsumElectricityRealTime}">
16.                                <telerikChart:LineSeries.CategoryBinding>
17.                                    <telerikChart:PropertyNameDataPointBinding PropertyName="DateTimeVal"/>
18.                                </telerikChart:LineSeries.CategoryBinding>
19.                                <telerikChart:LineSeries.ValueBinding>
20.                                    <telerikChart:PropertyNameDataPointBinding PropertyName="Value"/>
21.                                </telerikChart:LineSeries.ValueBinding>
22.                            </telerikChart:LineSeries>
23.
24.                            <!--Serie 2-->
25.                            <telerikChart:LineSeries   Stroke="Green" StrokeThickness="1" DisplayName="*Thermal" ItemsSource="{Binding DataConsumThermalRealTime}">
26.                                <telerikChart:LineSeries.CategoryBinding>
27.                                    <telerikChart:PropertyNameDataPointBinding PropertyName="DateTimeVal"/>
28.                                </telerikChart:LineSeries.CategoryBinding>
29.                                <telerikChart:LineSeries.ValueBinding>
30.                                    <telerikChart:PropertyNameDataPointBinding PropertyName="Value"/>
31.                                </telerikChart:LineSeries.ValueBinding>
32.                            </telerikChart:LineSeries>
33.
34.                            <!--Serie 3-->
35.                            <telerikChart:LineSeries   Stroke="Blue"  StrokeThickness="1"    DisplayName="*Gas"  ItemsSource="{Binding DataConsumGasRealTime}">
36.                                <telerikChart:LineSeries.CategoryBinding>
37.                                    <telerikChart:PropertyNameDataPointBinding PropertyName="DateTimeVal"/>
38.                                </telerikChart:LineSeries.CategoryBinding>
39.                                <telerikChart:LineSeries.ValueBinding>
40.                                    <telerikChart:PropertyNameDataPointBinding PropertyName="Value"/>
41.                                </telerikChart:LineSeries.ValueBinding>
42.                            </telerikChart:LineSeries>
43.
44.                        </telerikChart:RadCartesianChart.Series>
45.
46.                    </telerikChart:RadCartesianChart>

How can I have equal alignments?

 

Thank you in advance.

[ignacio]

Sorry,

The Android File :-)

 

[Didi]

Hello Ignacio,

Thank you for the provided code and images.

Regarding the Axis Label positioning, this is the expected appearance on iOS for that axis type. For more details refer to the iOS TKChart LineSeries. 

Native Android and iOS charts are two different controls and do not have 100% appearance-matching across all the platforms. In this case 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.

I have attached a sample that shows how to achieve this for iOS. Please take a look at the CustomChartRederer.cs file inside the iOS project. 

Please review the sample and let me know whether it works for you.

Regards,
Didi
Progress Telerik

[Ignacio]

Thanks Didi, 

I'll try it.