RadCartesianChart iOS Zooming issue

2 posts, 0 answers
  1. Hady
    Hady avatar
    9 posts
    Member since:
    Oct 2018

    Posted 04 Dec 2018 Link to this post

    I am facing an issue regarding Xamarin Telerik RadCartesianChart, While zooming with setting the GapLength="0.9" MajorTickInterval="30",
    No new labels created or rendered to the chart as predicted, it works normally for android but on iOS it does nothing just zooming without rendering the hidden labels as happened at the Android platform,
    Kindly advice if there are any other attribute should be set to make this functionality work

    ViewModel Code

    01.using System.Collections.ObjectModel;
    02.using System.Windows.Input;
    03.using Prism.Navigation;
    04.using Xamarin.Forms;
    05. 
    06.namespace Demo.ViewModels
    07.{
    08.    public class CategoricalData
    09.    {
    10.        public object Category { get; set; }
    11. 
    12.        public double Value { get; set; }
    13.    }
    14.    public class ChartPageViewModel : BaseViewModel
    15.    {
    16.        private ObservableCollection<CategoricalData> _data;
    17. 
    18.        public ObservableCollection<CategoricalData> Data
    19.        {
    20.            get => _data;
    21.            set
    22.            {
    23.                //_data = value;
    24.                SetProperty(ref _data, value);
    25.                RaisePropertyChanged(nameof(Data));
    26.            }
    27.        }
    28.        public ChartPageViewModel()
    29.        {
    30.            LoadDummyData();
    31.        }
    32. 
    33.        public void LoadDummyData()
    34.        {
    35.           var dData = new ObservableCollection<CategoricalData>();
    36.            for (int i = 0; i < 300; i++)
    37.            {
    38.                dData.Add(new CategoricalData { Category = i, Value = (i%10 > 0)?( (i%2>0)? (i%30):(i%20)): 5 });
    39.            }
    40. 
    41.            Data = dData;
    42.        }
    43. 
    44. 
    45.    }
    46.}

     

    Xaml Code

    01.<?xml version="1.0" encoding="utf-8" ?>
    03.             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    04.             xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
    05.             xmlns:chart="clr-namespace:Telerik.XamarinForms.Chart;assembly=Telerik.XamarinForms.Chart"
    06.             prism:ViewModelLocator.AutowireViewModel="True" BackgroundColor="{StaticResource BackgroundColor}"
    07.             x:Class="Demo.Views.ChartPage">
    08. 
    09. 
    10.            <chart:RadCartesianChart x:Name="chart" BackgroundColor="Transparent" Grid.Row="1" >
    11.                <chart:RadCartesianChart.ChartBehaviors>
    12.                    <chart:ChartPanAndZoomBehavior ZoomMode="Horizontal" PanMode="Horizontal" />
    13.                </chart:RadCartesianChart.ChartBehaviors>
    14.                <chart:RadCartesianChart.HorizontalAxis >
    15.                    <OnPlatform x:TypeArguments="chart:CartesianAxis">
    16.                        <On Platform="Android">
    17.                            <chart:CategoricalAxis LineColor="#A9A9A9" MajorTickThickness="2" PlotMode="BetweenTicks" LabelFitMode="None"
    18.                                                   MajorTickBackgroundColor="#A9A9A9" GapLength="0.9" MajorTickInterval="50" LabelTextColor="White" ShowLabels="True"/>
    19.                        </On>
    20.                        <On Platform="iOS">
    21.                            <chart:CategoricalAxis LineColor="#A9A9A9" MajorTickThickness="2" PlotMode="BetweenTicks" LabelFitMode="None"
    22.                                                   MajorTickBackgroundColor="#A9A9A9" GapLength="0.9" MajorTickInterval="30"  LabelTextColor="White" ShowLabels="True" />
    23.                        </On>
    24.                    </OnPlatform>
    25.                </chart:RadCartesianChart.HorizontalAxis>
    26.                <chart:RadCartesianChart.VerticalAxis>
    27.                    <chart:NumericalAxis LabelTextColor="White" ShowLabels="True" Minimum="0" Maximum="80" LineColor="#A9A9A9" MajorTickBackgroundColor="#A9A9A9" />
    28.                </chart:RadCartesianChart.VerticalAxis>
    29.                <chart:RadCartesianChart.Series>
    30.                    <chart:LineSeries CategoryBinding="Category" ValueBinding="Value" ItemsSource="{Binding Data}" />
    31.                </chart:RadCartesianChart.Series>
    32.                <chart:RadCartesianChart.Grid>
    33.                    <chart:CartesianChartGrid MajorLinesVisibility="XY" MajorLineThickness="1"/>
    34.                </chart:RadCartesianChart.Grid>
    35. 
    36.            </chart:RadCartesianChart>
    37.         
    38.</ContentPage>

     

    Development Environment:

    • iOS 12.1
    • Xamarin Forms 3.2

  2. Yana
    Admin
    Yana avatar
    5044 posts

    Posted 06 Dec 2018 Link to this post

    Hi Hady,

    I am afraid you've stumbled upon a known issue in RadChart on iOS platform - we have it logged in our public portal, so you could track its status at the link below:
    https://feedback.progress.com/Project/168/feedback/Details/248289-chart-ios-missing-labels-after-pan-zoom-action

    There isn't a feasible workaround I could suggest.  In addition, I've updated its priority per your report.

    I am sorry for any inconvenience caused.

    Regards,
    Yana
    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
Back to Top