The iOS Create Multi Pane Stock Charts example demonstrates how SciChart iOS is suitable for creating complex, multi-panel stock chart and trading apps, able to display indicators on the main pane, in panels and synchronize the zooming, scrolling of multiple charts together.

An Ohlc or Candlestick chart is added by using SciChart’s SCIFastCandlestickRenderableSeries or SCIFastOhlcRenderableSeries respectively. Two line series using SCIFastLineRenderableSeries draw the moving averages.

Price data is updated in a SCIOhlcDataSeries in a timer callback. When the data updates, SciChart automatically redraws. Scrolling to the latest bar is handled in code by manipulating the Axis.VisibleRange property.
Technical Indicators are for demonstration purposes only. We recommend the open-source TA-Lib to integrate technical indicators to SciChart!

// MultiPaneStockChartLayout.xib

<?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="13771" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
    <device id="retina5_9" orientation="portrait">
        <adaptation id="fullscreen"/>
    </device>
    <dependencies>
        <deployment identifier="iOS"/>
        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="13772"/>
        <capability name="Constraints with non-1.0 multipliers" minToolsVersion="5.1"/>
        <capability name="Safe area layout guides" minToolsVersion="9.0"/>
        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
    </dependencies>
    <objects>
        <placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner" customClass="MultiPaneStockChartLayout">
            <connections>
                <outlet property="macdSurface" destination="vin-hd-GvH" id="r3D-Du-iGi"/>
                <outlet property="priceSurface" destination="lZ6-in-60a" id="yOr-jz-4Kx"/>
                <outlet property="rsiSurface" destination="US4-dr-gGB" id="4ee-VZ-c3G"/>
                <outlet property="volumeSurface" destination="fuh-IY-GnA" id="Qo4-l6-Yoy"/>
            </connections>
        </placeholder>
        <placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/>
        <view contentMode="scaleToFill" id="iN0-l3-epB">
            <rect key="frame" x="0.0" y="0.0" width="375" height="812"/>
            <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
            <subviews>
                <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="lZ6-in-60a" customClass="SCIChartSurface">
                    <rect key="frame" x="0.0" y="44" width="375" height="403.66666666666669"/>
                    <color key="backgroundColor" white="1" alpha="1" colorSpace="calibratedWhite"/>
                </view>
                <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="vin-hd-GvH" customClass="SCIChartSurface">
                    <rect key="frame" x="0.0" y="447.66666666666669" width="375" height="110.00000000000006"/>
                    <color key="backgroundColor" white="1" alpha="1" colorSpace="calibratedWhite"/>
                </view>
                <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="fuh-IY-GnA" customClass="SCIChartSurface">
                    <rect key="frame" x="0.0" y="668" width="375" height="110"/>
                    <color key="backgroundColor" white="1" alpha="1" colorSpace="calibratedWhite"/>
                </view>
                <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="US4-dr-gGB" customClass="SCIChartSurface">
                    <rect key="frame" x="0.0" y="557.66666666666663" width="375" height="110.33333333333337"/>
                    <color key="backgroundColor" white="1" alpha="1" colorSpace="calibratedWhite"/>
                </view>
            </subviews>
            <color key="backgroundColor" red="0.10980392156862745" green="0.10980392156862745" blue="0.10980392156862745" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
            <constraints>
                <constraint firstItem="lZ6-in-60a" firstAttribute="height" secondItem="vUN-kp-3ea" secondAttribute="height" multiplier="0.55" id="1ku-36-1Sd"/>
                <constraint firstItem="vin-hd-GvH" firstAttribute="leading" secondItem="iN0-l3-epB" secondAttribute="leading" id="2tv-E2-SgL"/>
                <constraint firstItem="fuh-IY-GnA" firstAttribute="trailing" secondItem="iN0-l3-epB" secondAttribute="trailing" id="55k-6S-ZxV"/>
                <constraint firstItem="US4-dr-gGB" firstAttribute="trailing" secondItem="iN0-l3-epB" secondAttribute="trailing" id="8kd-Pa-aNu"/>
                <constraint firstItem="fuh-IY-GnA" firstAttribute="leading" secondItem="iN0-l3-epB" secondAttribute="leading" id="Bc2-Ae-mP1"/>
                <constraint firstItem="lZ6-in-60a" firstAttribute="top" secondItem="vUN-kp-3ea" secondAttribute="top" id="CGe-rV-Jzy"/>
                <constraint firstItem="lZ6-in-60a" firstAttribute="leading" secondItem="iN0-l3-epB" secondAttribute="leading" id="Kmf-zV-qnh"/>
                <constraint firstItem="vin-hd-GvH" firstAttribute="trailing" secondItem="iN0-l3-epB" secondAttribute="trailing" id="MkZ-kj-eie"/>
                <constraint firstItem="vin-hd-GvH" firstAttribute="top" secondItem="lZ6-in-60a" secondAttribute="bottom" id="Mzc-ih-4eZ"/>
                <constraint firstItem="fuh-IY-GnA" firstAttribute="height" secondItem="vUN-kp-3ea" secondAttribute="height" multiplier="0.15" id="Qng-qF-AGJ"/>
                <constraint firstItem="US4-dr-gGB" firstAttribute="height" secondItem="vUN-kp-3ea" secondAttribute="height" multiplier="0.15" id="Rt9-hT-TQA"/>
                <constraint firstItem="lZ6-in-60a" firstAttribute="trailing" secondItem="iN0-l3-epB" secondAttribute="trailing" id="YfD-oI-31U"/>
                <constraint firstItem="vin-hd-GvH" firstAttribute="height" secondItem="vUN-kp-3ea" secondAttribute="height" multiplier="0.15" id="Zo0-ks-O2k"/>
                <constraint firstItem="US4-dr-gGB" firstAttribute="top" secondItem="vin-hd-GvH" secondAttribute="bottom" id="ccI-fe-vuC"/>
                <constraint firstItem="fuh-IY-GnA" firstAttribute="top" secondItem="US4-dr-gGB" secondAttribute="bottom" id="eIH-Vx-iUP"/>
                <constraint firstItem="US4-dr-gGB" firstAttribute="leading" secondItem="iN0-l3-epB" secondAttribute="leading" id="vK6-wh-vbs"/>
            </constraints>
            <viewLayoutGuide key="safeArea" id="vUN-kp-3ea"/>
            <point key="canvasLocation" x="32.5" y="75"/>
        </view>
    </objects>
</document>

// MultiPaneStockChartLayout.m

//******************************************************************************
// SCICHART® Copyright SciChart Ltd. 2011-2019. All rights reserved.
//
// Web: http://www.scichart.com
// Support: support@scichart.com
// Sales:   sales@scichart.com
//
// MultiPaneStockChartLayout.m is part of the SCICHART® Examples. Permission is hereby granted
// to modify, create derivative works, distribute and publish any part of this source
// code whether for commercial, private or personal use.
//
// The SCICHART® examples are distributed in the hope that they will be useful, but
// without any warranty. It is provided "AS IS" without warranty of any kind, either
// expressed or implied.
//******************************************************************************

#import "MultiPaneStockChartLayout.h"

@implementation MultiPaneStockChartLayout

- (Class)exampleViewType {
    return MultiPaneStockChartLayout.class;
}

@end

// MultiPaneStockChartView.m

//******************************************************************************
// SCICHART® Copyright SciChart Ltd. 2011-2019. All rights reserved.
//
// Web: http://www.scichart.com
// Support: support@scichart.com
// Sales:   sales@scichart.com
//
// MultiPaneStockChartView.m is part of the SCICHART® Examples. Permission is hereby granted
// to modify, create derivative works, distribute and publish any part of this source
// code whether for commercial, private or personal use.
//
// The SCICHART® examples are distributed in the hope that they will be useful, but
// without any warranty. It is provided "AS IS" without warranty of any kind, either
// expressed or implied.
//******************************************************************************

#import "MultiPaneStockChartView.h"
#import "SCDDataManager.h"
#import "SCDMovingAverage.h"

NSString * const VOLUME = @"Volume";
NSString * const PRICES = @"Prices";
NSString * const RSI = @"RSI";
NSString * const MACD = @"MACD";

// MARK: - Chart Panes Interfaces

@interface BasePaneModel : NSObject

@property(nonatomic) SCIRenderableSeriesCollection *renderableSeries;
@property(nonatomic) SCIAnnotationCollection *annotations;
@property(nonatomic) SCINumericAxis *yAxis;
@property(nonatomic) NSString *title;

- (instancetype)initWithTitle:(NSString *)title yAxisTextFormatting:(NSString *)yAxisTextFormatting isFirstPane:(BOOL)isFirstPane;
- (void)addRenderableSeries:(SCIRenderableSeriesBase *)renderableSeries;

@end

@interface PricePaneModel : BasePaneModel
- (instancetype)initWithSeries:(SCDPriceSeries *)priceSeries;
@end

@interface VolumePaneModel : BasePaneModel
- (instancetype)initWithSeries:(SCDPriceSeries *)priceSeries;
@end

@interface RsiPaneModel : BasePaneModel
- (instancetype)initWithSeries:(SCDPriceSeries *)priceSeries;
@end

@interface MacdPaneModel : BasePaneModel
- (instancetype)initWithSeries:(SCDPriceSeries *)priceSeries;
@end

// MARK: - Charts Initialization

@implementation MultiPaneStockChartView {
    SCIChartVerticalGroup *_verticalGroup;
    SCIDoubleRange *_sharedXRange;
}

- (void)initExample {
    _verticalGroup = [SCIChartVerticalGroup new];
    _sharedXRange = [SCIDoubleRange new];
    
    SCDPriceSeries *priceSeries = [SCDDataManager getPriceDataEurUsd];
    
    PricePaneModel *pricePaneModel = [[PricePaneModel alloc] initWithSeries:priceSeries];
    MacdPaneModel *macdPaneModel = [[MacdPaneModel alloc] initWithSeries:priceSeries];
    RsiPaneModel *rsiPaneModel = [[RsiPaneModel alloc] initWithSeries:priceSeries];
    VolumePaneModel *volumePaneModel = [[VolumePaneModel alloc] initWithSeries:priceSeries];
    
    [self initSurface:self.priceSurface paneModel:pricePaneModel isMainPane:YES];
    [self initSurface:self.macdSurface paneModel:macdPaneModel isMainPane:NO];
    [self initSurface:self.rsiSurface paneModel:rsiPaneModel isMainPane:NO];
    [self initSurface:self.volumeSurface paneModel:volumePaneModel isMainPane:NO];
}

- (void)initSurface:(SCIChartSurface *)surface paneModel:(BasePaneModel *)model isMainPane:(BOOL)isMainPane {
    SCICategoryDateAxis *xAxis = [SCICategoryDateAxis new];
    xAxis.isVisible = isMainPane;
    xAxis.visibleRange = _sharedXRange;
    xAxis.growBy = [[SCIDoubleRange alloc] initWithMin:0.0 max:0.05];
    
    SCIXAxisDragModifier *xAxisDragModifier = [SCIXAxisDragModifier new];
    xAxisDragModifier.dragMode = SCIAxisDragMode_Pan;
    xAxisDragModifier.clipModeX = SCIClipMode_StretchAtExtents;
    
    SCIPinchZoomModifier *pinchZoomModifier = [SCIPinchZoomModifier new];
    pinchZoomModifier.direction = SCIDirection2D_XDirection;
    
    SCILegendModifier *legendModifier = [SCILegendModifier new];
    legendModifier.showCheckBoxes = NO;
    
    [SCIUpdateSuspender usingWithSuspendable:surface withBlock:^{
        [surface.xAxes add:xAxis];
        [surface.yAxes add:model.yAxis];
        surface.renderableSeries = model.renderableSeries;
        surface.annotations = model.annotations;
        [surface.chartModifiers addAll:xAxisDragModifier, pinchZoomModifier, [SCIZoomPanModifier new], [SCIZoomExtentsModifier new], legendModifier, nil];
        
        [_verticalGroup addSurfaceToGroup:surface];
    }];
}

@end

// MARK: - Base Chart Pane

@implementation BasePaneModel

@synthesize renderableSeries = _renderableSeries;
@synthesize annotations = _annotations;
@synthesize yAxis = _yAxis;
@synthesize title = _title;

- (instancetype)initWithTitle:(NSString *)title yAxisTextFormatting:(NSString *)yAxisTextFormatting isFirstPane:(BOOL)isFirstPane {
    self = [super init];
    
    if (self) {
        _title = title;
        _renderableSeries = [SCIRenderableSeriesCollection new];
        _annotations = [SCIAnnotationCollection new];
        
        _yAxis = [SCINumericAxis new];
        _yAxis.axisId = title;
        if (yAxisTextFormatting != nil) {
            _yAxis.textFormatting = yAxisTextFormatting;
        }
        _yAxis.autoRange = SCIAutoRange_Always;
        _yAxis.minorsPerMajor = isFirstPane ? 4 : 2;
        _yAxis.maxAutoTicks = isFirstPane ? 8 : 4;
        
        double growBy = isFirstPane ? 0.05 : 0.0;
        _yAxis.growBy = [[SCIDoubleRange alloc] initWithMin:growBy max:growBy];
    }
    
    return self;
}

- (void)addRenderableSeries:(SCIRenderableSeriesBase *)renderableSeries {
    [_renderableSeries add:renderableSeries];
}

- (void)addAxisMarkerAnnotationWithYAxisId:(NSString *)yAxisId format:(NSString *)format value:(id<ISCIComparable>)value color:(UIColor *)color {
    SCIAxisMarkerAnnotation *axisMarkerAnnotation = [SCIAxisMarkerAnnotation new];
    axisMarkerAnnotation.yAxisId = yAxisId;
    axisMarkerAnnotation.y1 = value;
    axisMarkerAnnotation.coordinateMode = SCIAnnotationCoordinateMode_Absolute;
    if (color != nil) {
        axisMarkerAnnotation.backgroundBrush = [[SCISolidBrushStyle alloc] initWithColor:color];
    }

    axisMarkerAnnotation.formattedValue = [NSString stringWithFormat: format, value.toDouble];
    
    [_annotations add:axisMarkerAnnotation];
}

@end

// MARK: - Price Pane

@implementation PricePaneModel

- (instancetype)initWithSeries:(SCDPriceSeries *)prices {
    self = [super initWithTitle:PRICES yAxisTextFormatting:@"$0.0000" isFirstPane:YES];
    if (self) {
        // Add the main OHLC chart
        SCIOhlcDataSeries *stockPrices = [[SCIOhlcDataSeries alloc] initWithXType:SCIDataType_Date yType:SCIDataType_Double];
        stockPrices.seriesName = @"EUR/USD";
        [stockPrices appendValuesX:prices.dateData open:prices.openData high:prices.highData low:prices.lowData close:prices.closeData];
        
        SCIFastCandlestickRenderableSeries *candlestickSeries = [SCIFastCandlestickRenderableSeries new];
        candlestickSeries.dataSeries = stockPrices;
        candlestickSeries.yAxisId = PRICES;
        [self addRenderableSeries:candlestickSeries];
        
        SCIXyDataSeries *maLow = [[SCIXyDataSeries alloc] initWithXType:SCIDataType_Date yType:SCIDataType_Double];
        maLow.seriesName = @"Low Line";
        [maLow appendValuesX:prices.dateData y:[SCDMovingAverage movingAverage:prices.closeData period:50]];
        
        SCIFastLineRenderableSeries *lineSeriesLow = [SCIFastLineRenderableSeries new];
        lineSeriesLow.dataSeries = maLow;
        lineSeriesLow.yAxisId = PRICES;
        lineSeriesLow.strokeStyle = [[SCISolidPenStyle alloc] initWithColorCode:0xFFFF3333 thickness:1];
        [self addRenderableSeries:lineSeriesLow];
        
        SCIXyDataSeries *maHigh = [[SCIXyDataSeries alloc] initWithXType:SCIDataType_Date yType:SCIDataType_Double];
        maHigh.seriesName = @"High Line";
        [maHigh appendValuesX:prices.dateData y:[SCDMovingAverage movingAverage:prices.closeData period:200]];
        
        SCIFastLineRenderableSeries *lineSeriesHigh = [SCIFastLineRenderableSeries new];
        lineSeriesHigh.dataSeries = maHigh;
        lineSeriesHigh.yAxisId = PRICES;
        lineSeriesHigh.strokeStyle = [[SCISolidPenStyle alloc] initWithColorCode:0xFF33DD33 thickness:1];
        [self addRenderableSeries:lineSeriesHigh];
        
        [self addAxisMarkerAnnotationWithYAxisId:PRICES format:@"$%.4f" value:[stockPrices.yValues valueAt:stockPrices.count -1] color:lineSeriesLow.strokeStyle.color];
        [self addAxisMarkerAnnotationWithYAxisId:PRICES format:@"$%.4f" value:[maLow.yValues valueAt:maLow.count -1] color:lineSeriesLow.strokeStyle.color];
        [self addAxisMarkerAnnotationWithYAxisId:PRICES format:@"$%.4f" value:[maHigh.yValues valueAt:maHigh.count -1] color:lineSeriesHigh.strokeStyle.color];
    }
    return self;
}

@end

// MARK: - Volume Pane

@implementation VolumePaneModel

- (instancetype)initWithSeries:(SCDPriceSeries *)prices {
    self = [super initWithTitle:VOLUME yAxisTextFormatting:@"###E+0" isFirstPane:NO];
    if (self) {
        SCIXyDataSeries *volumePrices = [[SCIXyDataSeries alloc] initWithXType:SCIDataType_Date yType:SCIDataType_Long];
        volumePrices.seriesName = @"Volume";
        [volumePrices appendValuesX:prices.dateData y:prices.volumeData];
        
        SCIFastColumnRenderableSeries *columnSeries = [SCIFastColumnRenderableSeries new];
        columnSeries.dataSeries = volumePrices;
        columnSeries.yAxisId = VOLUME;
        [self addRenderableSeries:columnSeries];
        
        [self addAxisMarkerAnnotationWithYAxisId:VOLUME format:@"$%.g" value:[volumePrices.yValues valueAt:volumePrices.count -1] color:nil];
    }
    return self;
}

@end

// MARK: - RSI Pane

@implementation RsiPaneModel

- (instancetype)initWithSeries:(SCDPriceSeries *)prices {
    self = [super initWithTitle:RSI yAxisTextFormatting:@"0.0" isFirstPane:NO];
    if (self) {
        SCIXyDataSeries *rsiDataSeries = [[SCIXyDataSeries alloc] initWithXType:SCIDataType_Date yType:SCIDataType_Double];
        rsiDataSeries.seriesName = @"RSI";
        [rsiDataSeries appendValuesX:prices.dateData y:[SCDMovingAverage rsi:prices period:14]];
        
        SCIFastLineRenderableSeries *lineSeries = [SCIFastLineRenderableSeries new];
        lineSeries.dataSeries = rsiDataSeries;
        lineSeries.yAxisId = RSI;
        lineSeries.strokeStyle = [[SCISolidPenStyle alloc] initWithColorCode:0xFFC6E6FF thickness:1];
        [self addRenderableSeries:lineSeries];
        
        [self addAxisMarkerAnnotationWithYAxisId:RSI format:@"%.2f" value:[rsiDataSeries.yValues valueAt:rsiDataSeries.count -1] color:nil];
    }
    return self;
}

@end

// MARK: - MACD Pane

@implementation MacdPaneModel

- (instancetype)initWithSeries:(SCDPriceSeries *)prices {
    self = [super initWithTitle:MACD yAxisTextFormatting:@"0.00" isFirstPane:NO];
    if (self) {
        
        SCDMacdPoints *macdPoints = [SCDMovingAverage macd:prices.closeData slow:12 fast:25 signal:9];
        
        SCIXyDataSeries *histogramDataSeries = [[SCIXyDataSeries alloc] initWithXType:SCIDataType_Date yType:SCIDataType_Double];
        histogramDataSeries.seriesName = @"Histogram";
        [histogramDataSeries appendValuesX:prices.dateData y:macdPoints.divergenceValues];
        
        SCIFastColumnRenderableSeries *columnSeries = [SCIFastColumnRenderableSeries new];
        columnSeries.dataSeries = histogramDataSeries;
        columnSeries.yAxisId = MACD;
        [self addRenderableSeries:columnSeries];
        
        SCIXyyDataSeries *macdDataSeries = [[SCIXyyDataSeries alloc] initWithXType:SCIDataType_Date yType:SCIDataType_Double];
        macdDataSeries.seriesName = @"MACD";
        [macdDataSeries appendValuesX:prices.dateData y:macdPoints.macdValues y1:macdPoints.signalValues];
        
        SCIFastBandRenderableSeries *bandSeries = [SCIFastBandRenderableSeries new];
        bandSeries.dataSeries = macdDataSeries;
        bandSeries.yAxisId = MACD;
        [self addRenderableSeries:bandSeries];
        
        [self addAxisMarkerAnnotationWithYAxisId:MACD format:@"$%.2f" value:[histogramDataSeries.yValues valueAt:histogramDataSeries.count -1] color:nil];
        [self addAxisMarkerAnnotationWithYAxisId:MACD format:@"$%.2f" value:[macdDataSeries.yValues valueAt:macdDataSeries.count -1] color:nil];
    }
    return self;
}

@end

// MultiPaneStockChartView.swift

//******************************************************************************
// SCICHART® Copyright SciChart Ltd. 2011-2019. All rights reserved.
//
// Web: http://www.scichart.com
// Support: support@scichart.com
// Sales:   sales@scichart.com
//
// MultiPaneStockChartView.swift is part of the SCICHART® Examples. Permission is hereby granted
// to modify, create derivative works, distribute and publish any part of this source
// code whether for commercial, private or personal use.
//
// The SCICHART® examples are distributed in the hope that they will be useful, but
// without any warranty. It is provided "AS IS" without warranty of any kind, either
// expressed or implied.
//******************************************************************************

let VOLUME = "Volume";
let PRICES = "Prices";
let RSI = "RSI";
let MACD = "MACD";

// MARK: - Charts Initialization

class MultiPaneStockChartView: MultiPaneStockChartLayout {
    let verticalGroup = SCIChartVerticalGroup()
    let sharedXRange = SCIDoubleRange()
    
    override func initExample() {
        let SCDPriceSeries = SCDDataManager.getPriceDataEurUsd()

        let pricePaneModel = PricePaneModel(prices: SCDPriceSeries)
        let macdPaneModel = MacdPaneModel(prices: SCDPriceSeries)
        let rsiPaneModel = RsiPaneModel(prices: SCDPriceSeries)
        let volumePaneModel = VolumePaneModel(prices: SCDPriceSeries)

        initSurface(priceSurface, model: pricePaneModel, isMainPane: true)
        initSurface(macdSurface, model: macdPaneModel, isMainPane: false)
        initSurface(rsiSurface, model: rsiPaneModel, isMainPane: false)
        initSurface(volumeSurface, model: volumePaneModel, isMainPane: false)
    }

    fileprivate func initSurface(_ surface: SCIChartSurface, model: BasePaneModel, isMainPane: Bool) {
        let xAxis = SCICategoryDateAxis()
        xAxis.isVisible = isMainPane
        xAxis.visibleRange = sharedXRange
        xAxis.growBy = SCIDoubleRange(min: 0.0, max: 0.05)

        let xAxisDragModifier = SCIXAxisDragModifier()
        xAxisDragModifier.dragMode = .pan
        xAxisDragModifier.clipModeX = .stretchAtExtents

        let pinchZoomModifier = SCIPinchZoomModifier()
        pinchZoomModifier.direction = .xDirection

        let legendModifier = SCILegendModifier()
        legendModifier.showCheckBoxes = false

        SCIUpdateSuspender.usingWith(surface) {
            surface.xAxes.add(xAxis)
            surface.yAxes.add(model.yAxis)
            surface.renderableSeries = model.renderableSeries
            surface.annotations = model.annotations
            surface.chartModifiers.add(items: xAxisDragModifier, pinchZoomModifier, SCIZoomPanModifier(), SCIZoomExtentsModifier(), legendModifier)
            
            self.verticalGroup.addSurface(toGroup: surface)
        }
    }
}

// MARK: - Base Chart Pane

class BasePaneModel {
    
    fileprivate let renderableSeries = SCIRenderableSeriesCollection()
    fileprivate let annotations = SCIAnnotationCollection()
    fileprivate let yAxis = SCINumericAxis()
    fileprivate let title: String

    init(title: String, yAxisTextFormatting: String?, isFirstPane: Bool) {
        self.title = title
        yAxis.axisId = title
        if (yAxisTextFormatting != nil) {
            yAxis.textFormatting = yAxisTextFormatting
        }
        yAxis.autoRange = .always
        yAxis.minorsPerMajor = isFirstPane ? 4 : 2
        yAxis.maxAutoTicks = isFirstPane ? 8 : 4

        let growBy = isFirstPane ? 0.05 : 0.0
        yAxis.growBy = SCIDoubleRange(min: growBy, max: growBy)
    }

    func addRenderableSeries(_ renderableSeries: SCIRenderableSeriesBase) {
        self.renderableSeries.add(renderableSeries)
    }

    func addAxisMarkerAnnotationWith(_ yAxisId: String, format: String, value: ISCIComparable, color: UIColor?) {
        let axisMarkerAnnotation = SCIAxisMarkerAnnotation()
        axisMarkerAnnotation.yAxisId = yAxisId
        axisMarkerAnnotation.set(y1: value.toDouble())
        axisMarkerAnnotation.coordinateMode = .absolute
        
        if let uiColor = color {
            axisMarkerAnnotation.backgroundBrush = SCISolidBrushStyle(color: uiColor)
        }
        axisMarkerAnnotation.fontStyle = SCIFontStyle(fontSize: 12, andTextColor: .white)
        axisMarkerAnnotation.formattedValue = String(format: format, value.toDouble())

        annotations.add(axisMarkerAnnotation)
    }
}

// MARK: - Price Pane

class PricePaneModel: BasePaneModel {
    
    init(prices: SCDPriceSeries) {
        super.init(title: PRICES, yAxisTextFormatting: "$0.0000", isFirstPane: true)

        // Add the main OHLC chart
        let stockPrices = SCIOhlcDataSeries(xType: .date, yType: .double)
        stockPrices.seriesName = "EUR/USD"
        stockPrices.append(x: prices.dateData, open: prices.openData, high: prices.highData, low: prices.lowData, close: prices.closeData)
        
        let candlestickSeries = SCIFastCandlestickRenderableSeries()
        candlestickSeries.dataSeries = stockPrices
        candlestickSeries.yAxisId = PRICES
        addRenderableSeries(candlestickSeries)

        let maLow = SCIXyDataSeries(xType: .date, yType: .double)
        maLow.seriesName = "Low Line"
        maLow.append(x: prices.dateData, y: SCDMovingAverage.movingAverage(prices.closeData, period: 50))
        
        let lineSeriesLow = SCIFastLineRenderableSeries()
        lineSeriesLow.dataSeries = maLow
        lineSeriesLow.yAxisId = PRICES
        lineSeriesLow.strokeStyle = SCISolidPenStyle(colorCode: 0xFFFF3333, thickness: 1)
        addRenderableSeries(lineSeriesLow)

        let maHigh = SCIXyDataSeries(xType: .date, yType: .double)
        maHigh.seriesName = "High Line"
        maHigh.append(x: prices.dateData, y: SCDMovingAverage.movingAverage(prices.closeData, period: 200))
        
        let lineSeriesHigh = SCIFastLineRenderableSeries()
        lineSeriesHigh.dataSeries = maHigh
        lineSeriesHigh.yAxisId = PRICES
        lineSeriesHigh.strokeStyle = SCISolidPenStyle(colorCode: 0xFF33DD33, thickness: 1)
        addRenderableSeries(lineSeriesHigh)

        addAxisMarkerAnnotationWith(PRICES, format: "$%.4f", value: stockPrices.yValues.value(at: stockPrices.count - 1), color: lineSeriesLow.strokeStyle!.color)
        addAxisMarkerAnnotationWith(PRICES, format: "$%.4f", value: stockPrices.yValues.value(at: maLow.count - 1), color: lineSeriesLow.strokeStyle!.color)
        addAxisMarkerAnnotationWith(PRICES, format: "$%.4f", value: stockPrices.yValues.value(at: maHigh.count - 1), color: lineSeriesHigh.strokeStyle!.color)
    }
}

// MARK: - Volume Pane

class VolumePaneModel: BasePaneModel {

    init(prices: SCDPriceSeries) {
        super.init(title: VOLUME, yAxisTextFormatting: "###E+0", isFirstPane: false)

        let volumePrices = SCIXyDataSeries(xType: .date, yType: .long)
        volumePrices.seriesName = "Volume"
        volumePrices.append(x: prices.dateData, y: prices.volumeData)

        let columnSeries = SCIFastColumnRenderableSeries()
        columnSeries.dataSeries = volumePrices
        columnSeries.yAxisId = VOLUME
        addRenderableSeries(columnSeries)

        addAxisMarkerAnnotationWith(VOLUME, format: "$%.g", value: volumePrices.yValues.value(at: volumePrices.count - 1), color: nil)
    }
}

// MARK: - RSI Pane

class RsiPaneModel: BasePaneModel {
    init(prices: SCDPriceSeries) {
        super.init(title: RSI, yAxisTextFormatting: "0.0", isFirstPane: false)

        let rsiDataSeries = SCIXyDataSeries(xType: .date, yType: .double)
        rsiDataSeries.seriesName = "RSI"
        rsiDataSeries.append(x: prices.dateData, y: SCDMovingAverage.rsi(prices, period: 14))

        let lineSeries = SCIFastLineRenderableSeries()
        lineSeries.dataSeries = rsiDataSeries
        lineSeries.yAxisId = RSI
        lineSeries.strokeStyle = SCISolidPenStyle(colorCode: 0xFFC6E6FF, thickness: 1)
        addRenderableSeries(lineSeries)

        addAxisMarkerAnnotationWith(RSI, format: "%.2f", value: rsiDataSeries.yValues.value(at: rsiDataSeries.count - 1), color: nil)
    }
}

// MARK: - MACD Pane

class MacdPaneModel: BasePaneModel {
    init(prices: SCDPriceSeries) {
        super.init(title: MACD, yAxisTextFormatting: "0.00", isFirstPane: false)

        let macdPoints = SCDMovingAverage.macd(prices.closeData, slow: 12, fast: 25, signal: 9)

        let histogramDataSeries = SCIXyDataSeries(xType: .date, yType: .double)
        histogramDataSeries.seriesName = "Histogram"
        histogramDataSeries.append(x: prices.dateData, y: macdPoints.divergenceValues)

        let columnSeries = SCIFastColumnRenderableSeries()
        columnSeries.dataSeries = histogramDataSeries
        columnSeries.yAxisId = MACD
        addRenderableSeries(columnSeries)

        let macdDataSeries = SCIXyyDataSeries(xType: .date, yType: .double)
        macdDataSeries.seriesName = "MACD"
        macdDataSeries.append(x: prices.dateData, y: macdPoints.macdValues, y1: macdPoints.signalValues)

        let bandSeries = SCIFastBandRenderableSeries()
        bandSeries.dataSeries = macdDataSeries
        bandSeries.yAxisId = MACD
        addRenderableSeries(bandSeries)

        addAxisMarkerAnnotationWith(MACD, format: "%.2f", value: histogramDataSeries.yValues.value(at: histogramDataSeries.count - 1), color: nil)
        addAxisMarkerAnnotationWith(MACD, format: "%.2f", value: macdDataSeries.yValues.value(at: macdDataSeries.count - 1), color: nil)
    }
}

< BACK TO ALL IOS CHART CHART EXAMPLES