New to Telerik UI for Xamarin? Download free 30-day trial

Example

Let us consider the following example: we need to apply animation to LineSeries in iOS. Create a class which inherits from Telerik.XamarinForms.ChartRenderer.iOS.CartesianChartRenderer and override the UpdateNativeWidget and CreateChartDelegate methods:

    public class LineWithAnimationRenderer : CartesianChartRenderer
    {
        public LineWithAnimationRenderer()
        {
        }

        protected override void UpdateNativeWidget()
        {
            base.UpdateNativeWidget();
            this.Control.AllowAnimations = true;
        }

        protected override TKChartDelegate CreateChartDelegate(RadCartesianChart chart)
        {
            return new ChartWithAnimationDelegate(chart);
        }
    }

UpdateNativeWidget method takes care of allowing animations for the chart. CreateChartDelegate supplies an instance of a class that inherits from TKChartDelegate, configured with animations as per the iOS chart help. ChartWithAnimationDelegate inherits from Telerik.XamarinForms.ChartRenderer.iOS.CartesianChartDelegate, which in turn inherits from TKChartdelegate. This way you only need to extend it with the desired features:

    public class ChartWithAnimationDelegate : CartesianChartDelegate
    {
        public ChartWithAnimationDelegate()
        {
        }

        public override CAAnimation AnimationForSeries(TKChart chart, TKChartSeries series, TKChartSeriesRenderState state, CGRect rect)
        {
            var duration = 0.0;
            var animations = new List<CAAnimation>();
            for (int i = 0; i < (int)state.Points.Count; i++)
            {
                var pointKeyPath = state.AnimationKeyPathForPointAtIndex((uint)i);
                var keyPath = pointKeyPath + ".y";
                var point = state.Points.ObjectAtIndex((uint)i) as TKChartVisualPoint;
                var oldY = rect.Size.Height;

                if (i > 0)
                {
                    var animation = new CAKeyFrameAnimation();
                    animation.KeyPath = keyPath;
                    animation.Duration = (double)(0.1 * i );
                    animation.Values = new NSNumber[] { new NSNumber(oldY), new NSNumber(oldY), new NSNumber(point.Y) };
                    animation.KeyTimes = new NSNumber[] { new NSNumber(0), new NSNumber(i / (i + 1.0)), new NSNumber(1.0) };
                    animations.Add(animation);
                    duration = animation.Duration;
                }
                else
                {
                    var animation = new CABasicAnimation();
                    animation.KeyPath = keyPath;
                    animation.From = new NSNumber(oldY);
                    animation.To = new NSNumber(point.Y);
                    animation.Duration = 0.1;
                    animations.Add(animation);
                }
            }

            var group = new CAAnimationGroup();
            group.Duration = duration;
            group.Animations = animations.ToArray();
            return group;
        }
    }
    chart.Palette = CustomPalettes.CustomDark;

Now you only need to register your custom renderer using the ExportRenderer assembly level attribute:

    [assembly: Xamarin.Forms.ExportRenderer(typeof(Telerik.XamarinForms.Chart.RadCartesianChart), typeof(LineWithAnimationRenderer))]

See Also

In this article