Demonstrates how to enable Series Selection on touch-down in SciChart Xamarin Charts.

Tip!

In this example in native iOS we enable series selection using the SCISeriesSelectionModifier or SeriesSelectionModifier in native Android.
The style of a series when selected is controlled by the RenderableSeries selectedStyle property in iOS or setSelectedSeriesStyle() method in Android.

These are part of the powerful ChartModifier API which allow configuration of Zooming, Panning, Tooltips and more on the SciChart Xamarin Charts.

// SeriesSelectionViewController.cs (Xamarin.iOS)

using System;
using SciChart.Examples.Demo.Data;
using SciChart.Examples.Demo.Fragments.Base;
using SciChart.iOS.Charting;
using UIKit;
using Xamarin.Examples.Demo.iOS.Helpers;
using Xamarin.Examples.Demo.iOS.Resources.Layout;
using Xamarin.Examples.Demo.iOS.Views.Base;
using Xamarin.Examples.Demo.Utils;

namespace Xamarin.Examples.Demo.iOS.Views.Examples
{
    [ExampleDefinition("Series Selection", description: "Select series by touch or programmatically", icon: ExampleIcon.LineChart)]
    public class SeriesSelectionViewController : ExampleBaseViewController
    {
        public override Type ExampleViewType => typeof(SingleChartViewLayout);

        public SCIChartSurface Surface => ((SingleChartViewLayout)View).SciChartSurface;

        private const int SeriesPointCount = 50;
        private const int SeriesCount = 80;

        protected override void InitExample()
        {
            var xAxis = new SCINumericAxis { AutoRange = SCIAutoRange.Always };
            var leftAxis = new SCINumericAxis { AxisAlignment = SCIAxisAlignment.Left, AxisId = SCIAxisAlignment.Left.ToString() };
            var rightAxis = new SCINumericAxis { AxisAlignment = SCIAxisAlignment.Right, AxisId = SCIAxisAlignment.Right.ToString() };

            var initialColor = UIColor.Blue;
            var selectedStrokeStyle = new SCISolidPenStyle(ColorUtil.White, 4f);
            var selectedPointMarker = new SCIEllipsePointMarker
            {
                Width = 10,
                Height = 10,
                FillStyle = new SCISolidBrushStyle(0xFFFF00DC),
                StrokeStyle = new SCISolidPenStyle(ColorUtil.White, 1f)
            };

            using (Surface.SuspendUpdates())
            {
                Surface.XAxes.Add(xAxis);
                Surface.YAxes.Add(leftAxis);
                Surface.YAxes.Add(rightAxis);

                for (var i = 0; i < SeriesCount; i++)
                {
                    var alignment = i % 2 == 0 ? SCIAxisAlignment.Left : SCIAxisAlignment.Right;
                    var dataSeries = GenerateDataSeries(alignment, i);

                    var rs = new SCIFastLineRenderableSeries
                    {
                        DataSeries = dataSeries,
                        YAxisId = alignment.ToString(),
                        StrokeStyle = new SCISolidPenStyle(initialColor, 2f),
                        SelectedSeriesStyle = new SCILineSeriesStyle
                        {
                            StrokeStyle = selectedStrokeStyle,
                            PointMarker = selectedPointMarker,
                        }
                    };

                    var animation = new SCISweepRenderableSeriesAnimation(3, SCIAnimationCurve.EaseOut);
                    animation.StartAfterDelay(0.3f);
                    rs.AddAnimation(animation);

                    // Colors are incremented for visual purposes only
                    var newR = initialColor.R() == 255 ? 255 : initialColor.R() + 5;
                    var newB = initialColor.B() == 0 ? 0 : initialColor.B() - 2;
                    initialColor = UIColor.FromRGB((byte)newR, initialColor.G(), (byte)newB);

                    Surface.RenderableSeries.Add(rs);
                }

                Surface.ChartModifiers.Add(new SCISeriesSelectionModifier());
            }
        }

        private static IDataSeries GenerateDataSeries(SCIAxisAlignment alignment, int index)
        {
            var dataSeries = new XyDataSeries<double, double> { SeriesName = $"Series {index}" };

            var gradient = alignment == SCIAxisAlignment.Right ? index : -index;
            var start = alignment == SCIAxisAlignment.Right ? 0d : 14000d;

            var straightLine = DataManager.Instance.GetStraightLine(gradient, start, SeriesPointCount);

            dataSeries.Append(straightLine.XData, straightLine.YData);

            return dataSeries;
        }
    }
}

// SeriesSelectionFragment.cs (Xamarin.Android)

using Android.Graphics;
using Android.Runtime;
using Android.Views.Animations;
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.Drawing.Common;
using SciChart.Examples.Demo.Data;
using SciChart.Examples.Demo.Fragments.Base;
using Xamarin.Examples.Demo.Droid.Extensions;
using Xamarin.Examples.Demo.Droid.Fragments.Base;
using Xamarin.Examples.Demo.Utils;
using Object = Java.Lang.Object;

namespace Xamarin.Examples.Demo.Droid.Fragments.Examples
{
[ExampleDefinition("Series Selection", description: "Select series by touch or programmatically", icon: ExampleIcon.LineChart)]
    public class SeriesSelectionFragment : ExampleBaseFragment
    {
        public override int ExampleLayoutId => Resource.Layout.Example_Single_Chart_Fragment;

        public SciChartSurface Surface => View.FindViewById<SciChartSurface>(Resource.Id.chart);

        private const int SeriesPointCount = 50;
        private const int SeriesCount = 80;

        protected override void InitExample()
        {
            var xAxis = new NumericAxis(Activity) {AutoRange = AutoRange.Always};
            var leftAxis = new NumericAxis(Activity) {AxisAlignment = AxisAlignment.Left, AxisId = AxisAlignment.Left.Name()};
            var rightAxis = new NumericAxis(Activity) {AxisAlignment = AxisAlignment.Right, AxisId = AxisAlignment.Right.Name()};

            var selectedStrokeStyle = new SolidPenStyle(ColorUtil.White, 4f.ToDip(Activity));
            var selectedPointMarker = new EllipsePointMarker
            {
                Width = 10.ToDip(Activity),
                Height = 10.ToDip(Activity),
                FillStyle = new SolidBrushStyle(0xFFFF00DC),
                StrokeStyle = new SolidPenStyle(ColorUtil.White, 1f.ToDip(Activity))
            };

            using (Surface.SuspendUpdates())
            {
                Surface.XAxes.Add(xAxis);
                Surface.YAxes.Add(leftAxis);
                Surface.YAxes.Add(rightAxis);

                var initialColor = Color.Blue;
                for (var i = 0; i < SeriesCount; i++)
                {
                    var alignment = i%2 == 0 ? AxisAlignment.Left : AxisAlignment.Right;
                    var dataSeries = GenerateDataSeries(alignment, i);

                    var rs = new FastLineRenderableSeries
                    {
                        DataSeries = dataSeries,
                        YAxisId = alignment.Name(),
                        StrokeStyle = new SolidPenStyle(initialColor, 2f.ToDip(Activity))
                    };

                    // Colors are incremented for visual purposes only
                    var newR = initialColor.R == 255 ? 255 : initialColor.R + 5;
                    var newB = initialColor.B == 0 ? 0 : initialColor.B - 2;
                    initialColor = Color.Argb(255, (byte) newR, initialColor.G, (byte) newB);

                    Surface.RenderableSeries.Add(rs);

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

                Surface.ChartModifiers.Add(new SeriesSelectionModifier
                {
                    SelectedSeriesStyle = new SelectedSeriesStyle(selectedStrokeStyle, selectedPointMarker)
                });
            }
        }

        private static IDataSeries GenerateDataSeries(AxisAlignment alignment, int index)
        {
            var dataSeries = new XyDataSeries<double, double> {SeriesName = $"Series {index}"};

            var gradient = alignment == AxisAlignment.Right ? index : -index;
            var start = alignment == AxisAlignment.Right ? 0d : 14000d;

            var straightLine = DataManager.Instance.GetStraightLine(gradient, start, SeriesPointCount);

            dataSeries.Append(straightLine.XData, straightLine.YData);

            return dataSeries;
        }
    }

    public class SelectedSeriesStyle : SeriesStyleBase<IRenderableSeries>
    {
        private readonly PenStyle _selectedStrokeStyle;
        private readonly IPointMarker _selectedPointMarker;

        private const string Stroke = "Stroke";
        private const string PointMarker = "PointMarker";

        public SelectedSeriesStyle(PenStyle selectedStrokeStyle, IPointMarker selectedPointMarker)
        {
            _selectedStrokeStyle = selectedStrokeStyle;
            _selectedPointMarker = selectedPointMarker;
        }

        protected override void ApplyStyleInternal(IRenderableSeries renderableSeriesToStyle)
        {
            PutPropertyValue(renderableSeriesToStyle, Stroke, renderableSeriesToStyle.StrokeStyle);
            PutPropertyValue(renderableSeriesToStyle, PointMarker, renderableSeriesToStyle.PointMarker.JavaCast<Object>());

            renderableSeriesToStyle.StrokeStyle = _selectedStrokeStyle;
            renderableSeriesToStyle.PointMarker = _selectedPointMarker;
        }

        protected override void DiscardStyleInternal(IRenderableSeries renderableSeriesToStyle)
        {
            renderableSeriesToStyle.StrokeStyle = GetPropertyValue<PenStyle>(renderableSeriesToStyle, Stroke);
            renderableSeriesToStyle.PointMarker = GetPropertyValue<IPointMarker>(renderableSeriesToStyle, PointMarker);
        }
    }
}

< BACK TO ALL XAMARIN CHART CHART EXAMPLES