This example showcases how to create the Spline Line Series with Xamarin in SciChart.

It is provided by the SplineLineRenderableSeries in Xamarin.Android or SCISplineLineRenderableSeries in Xamarin.iOS. The API is flexible and allows you to customize the line by adding gaps in spline line, coloring different parts with a different color and adding point markers.

Please read more about how to use Xamarin.iOS and Xamarin.Android Spline line Series in the documentation below:

– Xamarin.iOS Spline Line Series

– Xamarin.Android Spline Line Series

// SplineLineChartViewController.cs (Xamarin.iOS)

using SciChart.iOS.Charting;
using CoreGraphics;

namespace Xamarin.Examples.Demo.iOS
{
    [ExampleDefinition("Spline Line Chart", "Create a spline Line Chart", icon: ExampleIcon.LineChart)]
    public class SplineLineChartViewController : SingleChartViewController<SCIChartSurface>
    {
        protected override void InitExample()
        {
            var xAxis = new SCINumericAxis { GrowBy = new SCIDoubleRange(0.1, 0.1) };
            var yAxis = new SCINumericAxis { GrowBy = new SCIDoubleRange(0.2, 0.2) };

            var dataSeries = new XyDataSeries<int, int>();
            var yValues = new[] { 50, 35, 61, 58, 50, 50, 40, 53, 55, 23, 45, 12, 59, 60 };
            for (int i = 0; i < yValues.Length; i++)
            {
                dataSeries.Append(i, yValues[i]);
            }

            var lineSeries = new SCIFastLineRenderableSeries()
            {
                DataSeries = dataSeries,
                StrokeStyle = new SCISolidPenStyle(0xFF4282B4, 2f),
                PointMarker = new SCIEllipsePointMarker
                {
                    Size = new CGSize(7, 7),
                    StrokeStyle = new SCISolidPenStyle(0xFF006400, 1f),
                    FillStyle = new SCISolidBrushStyle(0xFFFFFFFF)
                }
            };
            var rSeries = new SCISplineLineRenderableSeries { DataSeries = dataSeries, StrokeStyle = new SCISolidPenStyle(0xFF006400, 2f) };

            using (Surface.SuspendUpdates())
            {
                Surface.XAxes.Add(xAxis);
                Surface.YAxes.Add(yAxis);
                Surface.RenderableSeries.Add(rSeries);
                Surface.RenderableSeries.Add(lineSeries);
                Surface.ChartModifiers = new SCIChartModifierCollection
                {
                    new SCIZoomPanModifier(),
                    new SCIPinchZoomModifier(),
                    new SCIZoomExtentsModifier(),
                };

                SCIAnimations.SweepSeries(rSeries, 3, 0.35, new SCICubicEase());
                SCIAnimations.SweepSeries(lineSeries, 3, 0.35, new SCICubicEase());
            }
        }
    }
}

// SplineLineChartFragment.cs (Xamarin.Android)

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

using Android.App;
using Android.Content;
using Android.OS;
using Android.Runtime;
using Android.Views;
using Android.Views.Animations;
using Android.Widget;
using SciChart.Charting.Model;
using SciChart.Charting.Model.DataSeries;
using SciChart.Charting.Modifiers;
using SciChart.Charting.Visuals;
using SciChart.Charting.Visuals.Animations;
using SciChart.Charting.Visuals.Axes;
using SciChart.Charting.Visuals.PointMarkers;
using SciChart.Charting.Visuals.RenderableSeries;
using SciChart.Data.Model;
using SciChart.Drawing.Common;
using Xamarin.Examples.Demo.Data;
using Xamarin.Examples.Demo.Droid.Extensions;
using Xamarin.Examples.Demo.Droid.Fragments.Base;

namespace Xamarin.Examples.Demo.Droid.Fragments.Examples
{
    [ExampleDefinition("Spline Line Chart", description: "Create a spline Line Chart", icon: ExampleIcon.LineChart)]
    class SplineLineChartFragment : ExampleBaseFragment
    {
        public SciChartSurface Surface => View.FindViewById<SciChartSurface>(Resource.Id.chart);

        public override int ExampleLayoutId => Resource.Layout.Example_Single_Chart_Fragment;

        protected override void InitExample()
        {
            var xAxis = new NumericAxis(Activity) { GrowBy = new DoubleRange(0.1, 0.1)};
            var yAxis = new NumericAxis(Activity) { GrowBy = new DoubleRange(0.2, 0.2)};

            var dataSeries = new XyDataSeries<int, int>();
            var yValues = new[] { 50, 35, 61, 58, 50, 50, 40, 53, 55, 23, 45, 12, 59, 60 };
            for (int i = 0; i < yValues.Length; i++)
            {
                dataSeries.Append(i, yValues[i]);
            }

            var lineSeries = new FastLineRenderableSeries()
            {
                DataSeries = dataSeries, 
                StrokeStyle = new SolidPenStyle(0xFF4282B4, 2f.ToDip(Activity)),
                PointMarker = new EllipsePointMarker
                {
                    Width = 7.ToDip(Activity),
                    Height = 7.ToDip(Activity),
                    StrokeStyle = new SolidPenStyle(0xFF006400, 1f.ToDip(Activity)),
                    FillStyle = new SolidBrushStyle(0xFFFFFFFF)
                }
            };
            var rSeries = new SplineLineRenderableSeries { DataSeries = dataSeries, StrokeStyle = new SolidPenStyle(0xFF006400, 2f.ToDip(Activity)) };

            using (Surface.SuspendUpdates())
            {
                Surface.XAxes.Add(xAxis);
                Surface.YAxes.Add(yAxis);
                Surface.RenderableSeries.Add(rSeries);
                Surface.RenderableSeries.Add(lineSeries);
                Surface.ChartModifiers = new ChartModifierCollection
                {
                    new ZoomPanModifier(),
                    new PinchZoomModifier(),
                    new ZoomExtentsModifier(),
                };

                new SweepAnimatorBuilder(rSeries) { Interpolator = new DecelerateInterpolator(), Duration = 3000, StartDelay = 350 }.Start();
                new SweepAnimatorBuilder(lineSeries) { Interpolator = new DecelerateInterpolator(), Duration = 3000, StartDelay = 350 }.Start();
            }
        }
    }
}

< BACK TO ALL XAMARIN CHART CHART EXAMPLES