This example demonstrates how to create a Xamarin Scatter chart in code.

SciChart Xamarin Scatter Chart supports tens or hundreds of thousands of points out of the box*, and is suitable for use in real-time scientific, medical and trading applications.

*depending on available memory and device.

See Documentation on how to use this type here:

• The iOS Scatter Chart Documentation.
• The Android Scatter Chart Documentation

Tip!
The scatter chart uses the PointMarker API to define the marker shape and size.

// ScatterChartViewController.cs (Xamarin.iOS)

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

namespace Xamarin.Examples.Demo.iOS.Views.Examples
{
    [ExampleDefinition("Scatter Chart", description: "Demonstrates a simple Scatter chart", icon: ExampleIcon.ScatterChart)]
    public class ScatterChartViewController : ExampleBaseViewController
    {
        private readonly Random _random = new Random();

        public override Type ExampleViewType => typeof(SingleChartViewLayout);

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

        protected override void InitExample()
        {
            var xAxis = new SCINumericAxis { GrowBy = new SCIDoubleRange(0.1, 0.1) };
            var yAxis = new SCINumericAxis { GrowBy = new SCIDoubleRange(0.1, 0.1) };

            var rSeries1 = GetScatterRenderableSeries(new SCITrianglePointMarker(), 0xFFFFEB01, false);
            var rSeries2 = GetScatterRenderableSeries(new SCIEllipsePointMarker(), 0xFFFFA300, false);
            var rSeries3 = GetScatterRenderableSeries(new SCITrianglePointMarker(), 0xFFFF6501, true);
            var rSeries4 = GetScatterRenderableSeries(new SCIEllipsePointMarker(), 0xFFFFA300, true);

            using (Surface.SuspendUpdates())
            {
                Surface.XAxes.Add(xAxis);
                Surface.YAxes.Add(yAxis);
                Surface.RenderableSeries.Add(rSeries1);
                Surface.RenderableSeries.Add(rSeries2);
                Surface.RenderableSeries.Add(rSeries3);
                Surface.RenderableSeries.Add(rSeries4);

                Surface.ChartModifiers = new SCIChartModifierCollection
                {
                    new SCIZoomExtentsModifier(),
                    new SCIPinchZoomModifier(),
                    new SCICursorModifier(),
                    new SCIXAxisDragModifier(),
                    new SCIYAxisDragModifier { DragMode = SCIAxisDragMode.Pan }
                };
            }
        }

        private SCIXyScatterRenderableSeries GetScatterRenderableSeries(ISCIPointMarkerProtocol pointMarker, uint color, bool negative)
        {
            var seriesName = pointMarker is SCIEllipsePointMarker ?
                negative ? "Negative Ellipse" : "Positive Ellipse" :
                negative ? "Negative" : "Positive";

            var dataSeries = new XyDataSeries<int, double> { SeriesName = seriesName };

            for (var i = 0; i < 200; i++)
            {
                var time = i < 100 ? GetRandom(_random, 0, i + 10) / 100 : GetRandom(_random, 0, 200 - i + 10) / 100;
                var y = negative ? -time * time * time : time * time * time;

                dataSeries.Append(i, y);
            }

            pointMarker.Height = 6;
            pointMarker.Width = 6;
            pointMarker.StrokeStyle = new SCISolidPenStyle(UIColor.White, 0.1f);
            pointMarker.FillStyle = new SCISolidBrushStyle(color);

            return new SCIXyScatterRenderableSeries
            {
                DataSeries = dataSeries,
                Style = { PointMarker = pointMarker },
            };
        }

        private double GetRandom(Random random, double min, double max)
        {
            return min + (max - min) * random.NextDouble();
        }
    }
}

// ScatterChartFragment.cs (Xamarin.Android)

using System;
using Android.Content;
using Android.Graphics;
using SciChart.Charting.Model;
using SciChart.Charting.Model.DataSeries;
using SciChart.Charting.Modifiers;
using SciChart.Charting.Visuals;
using SciChart.Charting.Visuals.Axes;
using SciChart.Charting.Visuals.PointMarkers;
using SciChart.Charting.Visuals.RenderableSeries;
using SciChart.Data.Model;
using SciChart.Drawing.Common;
using SciChart.Examples.Demo.Fragments.Base;
using Xamarin.Examples.Demo.Droid.Extensions;
using Xamarin.Examples.Demo.Droid.Fragments.Base;
using static SciChart.Charting.Modifiers.AxisDragModifierBase;

namespace Xamarin.Examples.Demo.Droid.Fragments.Examples
{
    [ExampleDefinition("Scatter Chart", description:"Create a simple Scatter chart", icon: ExampleIcon.ScatterChart)]
    public class ScatterChartFragment : ExampleBaseFragment
    {
        private readonly Random _random = new Random(42);

        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.1, 0.1)};

            var rSeries1 = GetScatterRenderableSeries(Activity, new TrianglePointMarker(), 0xFFFFEB01, false);
            var rSeries2 = GetScatterRenderableSeries(Activity, new EllipsePointMarker(), 0xFFFFA300, false);
            var rSeries3 = GetScatterRenderableSeries(Activity, new TrianglePointMarker(), 0xFFFF6501, true);
            var rSeries4 = GetScatterRenderableSeries(Activity, new EllipsePointMarker(), 0xFFFFA300, true);

            using (Surface.SuspendUpdates())
            {
                Surface.XAxes.Add(xAxis);
                Surface.YAxes.Add(yAxis);
                Surface.RenderableSeries.Add(rSeries1);
                Surface.RenderableSeries.Add(rSeries2);
                Surface.RenderableSeries.Add(rSeries3);
                Surface.RenderableSeries.Add(rSeries4);

                Surface.ChartModifiers = new ChartModifierCollection
                {
                    new ZoomExtentsModifier(),
                    new PinchZoomModifier(),
                    new CursorModifier().WithReceiveHandledEvents(true),
                    new XAxisDragModifier().WithReceiveHandledEvents(true),
                    new YAxisDragModifier {DragMode = AxisDragMode.Pan}
                };
            }
        }

        private XyScatterRenderableSeries GetScatterRenderableSeries(Context context, IPointMarker pointMarker, uint color, bool negative)
        {
            var seriesName = pointMarker is EllipsePointMarker ?
                negative ? "Negative Ellipse" : "Positive Ellipse" :
                negative ? "Negative" : "Positive";

            var dataSeries = new XyDataSeries<int, double> {SeriesName = seriesName};

            for (var i = 0; i < 200; i++)
            {
                var time = i < 100 ? GetRandom(_random, 0, i + 10) / 100 : GetRandom(_random, 0, 200 - i + 10) / 100;
                var y = negative ? -time * time * time : time * time * time;

                dataSeries.Append(i, y);
            }

            pointMarker.SetSize(6.ToDip(context), 6.ToDip(context));
            pointMarker.StrokeStyle = new SolidPenStyle(Color.White, 0.1f.ToDip(context));
            pointMarker.FillStyle = new SolidBrushStyle(color);

            return new XyScatterRenderableSeries
            {
                DataSeries = dataSeries,
                StrokeStyle = new SolidPenStyle(color, 2f.ToDip(context)),
                PointMarker = pointMarker
            };
        }

        private double GetRandom(Random random, double min, double max)
        {
            return min + (max - min) * random.NextDouble();
        }
    }
}

< BACK TO ALL XAMARIN CHART CHART EXAMPLES