Chart Lines Y-axis text alignment

4 posts, 0 answers
  1. ignacio
    ignacio avatar
    2 posts
    Member since:
    May 2018

    Posted 07 Nov 2018 Link to this post

    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.

  2. ignacio
    ignacio avatar
    2 posts
    Member since:
    May 2018

    Posted 07 Nov 2018 Link to this post


    The Android File :-)


  3. Didi
    Didi avatar
    384 posts

    Posted 07 Nov 2018 Link to this post

    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
  4. Ignacio
    Ignacio avatar
    7 posts
    Member since:
    Aug 2018

    Posted 12 Nov 2018 Link to this post

    Thanks Didi, 

    I'll try it.

Back to Top