SciChart’s Charts are popular with traders as they are a good fit for use in real-time trading systems, in demanding and fast-moving markets.
This example demonstrates how to create a CandleStick Chart with Xamarin.iOS and Xamarin.Android for your mobile apps.

The SCIFastCandlestickRenderableSeries in iOS and FastCandlestickRenderableSeries in Android requires a SCIOhlcDataSeries and OhlcDataSeries respectively.

The OhlcDataSeries contains one X-point (Date) and four Y-points (Open, High, Low, Close). Candles are drawn using the UpWick, DownWick, UpBody and DownBody colors, which are used depending on whether Open > Close or not.

Documentation Links

• The iOS Candlestick Chart Documentation.
• The Android Candlestick Chart Documentation.
• The Xamarin iOS Chart Tutorials
• The Xamarin Android Chart Tutorials

// CandlestickChartView.cs (Xamarin.iOS)

// CandlestickChartFragment.cs (Xamarin.Android)

using System;
using Android.Views.Animations;
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.RenderableSeries;
using SciChart.Data.Model;
using SciChart.Drawing.Common;
using Xamarin.Examples.Demo.Data;
using Xamarin.Examples.Demo;
using Xamarin.Examples.Demo.Droid.Extensions;
using Xamarin.Examples.Demo.Droid.Fragments.Base;

namespace Xamarin.Examples.Demo.Droid.Fragments.Examples
{
    [ExampleDefinition("Candlestick Chart", description:"Creates a simple Candlestick Chart", icon: ExampleIcon.CandlestickChart)]
    public class CandlestickChartFragment : ExampleBaseFragment
    {
        public override int ExampleLayoutId => Resource.Layout.Example_Single_Chart_Fragment;

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

        protected override void InitExample()
        {
            var priceSeries = DataManager.Instance.GetPriceDataIndu();

            var dataSeries = new OhlcDataSeries<DateTime, double>();
            dataSeries.Append(priceSeries.TimeData, priceSeries.OpenData, priceSeries.HighData, priceSeries.LowData, priceSeries.CloseData);

            var size = priceSeries.Count;
            var xAxis = new CategoryDateAxis(Activity) {VisibleRange = new DoubleRange(size - 30, size), GrowBy = new DoubleRange(0, 0.1)};
            var yAxis = new NumericAxis(Activity) {GrowBy = new DoubleRange(0, 0.1), AutoRange = AutoRange.Always};

            var rSeries = new FastCandlestickRenderableSeries
            {
                DataSeries = dataSeries,
                StrokeUpStyle = new SolidPenStyle(0xFF00AA00, 1.ToDip(Activity)),
                StrokeDownStyle = new SolidPenStyle(0xFFFF0000, 1.ToDip(Activity)),
                FillUpBrushStyle = new SolidBrushStyle(0x8800AA00),
                FillDownBrushStyle = new SolidBrushStyle(0x88FF0000)
            };

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

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

< BACK TO ALL XAMARIN CHART CHART EXAMPLES