This is a migrated thread and some comments may be shown as answers.

Chart Lines Y-axis text alignment

3 Answers 31 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
ignacio asked on 07 Nov 2018, 01:49 PM

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>
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>
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>
44.                        </telerikChart:RadCartesianChart.Series>
46.                    </telerikChart:RadCartesianChart>

How can I have equal alignments?


Thank you in advance.

3 Answers, 1 is accepted

Sort by
Top achievements
Rank 1
answered on 07 Nov 2018, 01:51 PM


The Android File :-)


Telerik team
answered on 07 Nov 2018, 04:23 PM
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.

Progress Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Top achievements
Rank 1
answered on 12 Nov 2018, 03:10 PM

Thanks Didi, 

I'll try it.

Asked by
Top achievements
Rank 1
Answers by
Top achievements
Rank 1
Telerik team
Top achievements
Rank 1
Share this question