This example demonstrates how to create an iOS line chart with four series and multiple top / bottom X-Axis and left / right Y-Axis. SciChart iOS supports unlimited, multiple top or bottom X-Axes and unlimited, multiple left and right Y-Axes. This example shows in a simple way how to register a line series on each axis.

To add multiple axis to an iOS Chart, add SCIAxisBase divided types to the SCIChartSurface.xAxes and SCIChartSurface.yAxes properties.

You can set the alignment of any axis to Left, Right, Top, Bottom using the SCIAxisAlignment enumeration.

Finally, RenderableSeries can be registered on an axis using the xAxisId, yAxisId properties.

// MultipleAxesChartView.m

//******************************************************************************
// SCICHART® Copyright SciChart Ltd. 2011-2019. All rights reserved.
//
// Web: http://www.scichart.com
// Support: support@scichart.com
// Sales:   sales@scichart.com
//
// MultipleAxesChartView.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 "MultipleAxesChartView.h"
#import "SCDRandomUtil.h"

static NSString * const TopAxisId = @"xTopAxis";
static NSString * const BottomAxisId = @"xBottomAxis";
static NSString * const LeftAxisId = @"yLeftAxis";
static NSString * const RightAxisId = @"yRightAxis";

@implementation MultipleAxesChartView

- (Class)associatedType { return SCIChartSurface.class; }

- (BOOL)showDefaultModifiersInToolbar { return NO; }

- (void)initExample {
    id<ISCIAxis> xTopAxis = [SCINumericAxis new];
    xTopAxis.axisId = TopAxisId;
    xTopAxis.axisAlignment = SCIAxisAlignment_Top;
    xTopAxis.tickLabelStyle = [[SCIFontStyle alloc] initWithFontSize:12 andTextColorCode:0xFF279B27];
    xTopAxis.titleStyle = [[SCIFontStyle alloc] initWithFontSize:18 andTextColorCode:0xFF279B27];
    
    id<ISCIAxis> xBottomAxis = [SCINumericAxis new];
    xBottomAxis.axisId = BottomAxisId;
    xBottomAxis.axisAlignment = SCIAxisAlignment_Bottom;
    xBottomAxis.tickLabelStyle = [[SCIFontStyle alloc] initWithFontSize:12 andTextColorCode:0xFFFF1919];
    xBottomAxis.titleStyle = [[SCIFontStyle alloc] initWithFontSize:18 andTextColorCode:0xFFFF1919];
    
    id<ISCIAxis> yLeftAxis = [SCINumericAxis new];
    yLeftAxis.axisId = LeftAxisId;
    yLeftAxis.growBy = [[SCIDoubleRange alloc] initWithMin:0.1 max:0.1];
    yLeftAxis.axisAlignment = SCIAxisAlignment_Left;
    yLeftAxis.tickLabelStyle = [[SCIFontStyle alloc] initWithFontSize:12 andTextColorCode:0xFFFC9C29];
    yLeftAxis.titleStyle = [[SCIFontStyle alloc] initWithFontSize:18 andTextColorCode:0xFFFC9C29];
    
    id<ISCIAxis> yRightAxis = [SCINumericAxis new];
    yRightAxis.axisId = RightAxisId;
    yRightAxis.growBy = [[SCIDoubleRange alloc] initWithMin:0.1 max:0.1];
    yRightAxis.axisAlignment = SCIAxisAlignment_Right;
    yRightAxis.tickLabelStyle = [[SCIFontStyle alloc] initWithFontSize:12 andTextColorCode:0xFF4083B7];
    yRightAxis.titleStyle = [[SCIFontStyle alloc] initWithFontSize:18 andTextColorCode:0xFF4083B7];

    SCIModifierGroup *modifierGroup = SCDExampleBaseViewController.createDefaultModifiers;
    [modifierGroup.childModifiers addAll:[SCILegendModifier new], [SCIXAxisDragModifier new], [SCIYAxisDragModifier new], nil];
    
    [SCIUpdateSuspender usingWithSuspendable:self.surface withBlock:^{
        [self.surface.xAxes add:xTopAxis];
        [self.surface.xAxes add:xBottomAxis];
        [self.surface.yAxes add:yLeftAxis];
        [self.surface.yAxes add:yRightAxis];
        
        [self.surface.renderableSeries add:[self getRenderableSeriesWithXAxisId:BottomAxisId yAxisId:LeftAxisId seriesName:@"Red line" color:0xFFFF1919]];
        [self.surface.renderableSeries add:[self getRenderableSeriesWithXAxisId:BottomAxisId yAxisId:LeftAxisId seriesName:@"Green line" color:0xFF279B27]];
        [self.surface.renderableSeries add:[self getRenderableSeriesWithXAxisId:TopAxisId yAxisId:RightAxisId seriesName:@"Orange line" color:0xFFFC9C29]];
        [self.surface.renderableSeries add:[self getRenderableSeriesWithXAxisId:TopAxisId yAxisId:RightAxisId seriesName:@"Blue line" color:0xFF4083B7]];
        
        [self.surface.chartModifiers add:modifierGroup];
    }];
}

- (SCIFastLineRenderableSeries *)getRenderableSeriesWithXAxisId:(NSString *)xAxisId yAxisId:(NSString *)yAxisId seriesName:(NSString *)seriesName color:(uint)color {
    SCIXyDataSeries *dataSeries = [[SCIXyDataSeries alloc] initWithXType:SCIDataType_Double yType:SCIDataType_Double];
    dataSeries.seriesName = seriesName;
    
    double randomWalk = 10;
    for (int i = 0; i < 150; i++) {
        randomWalk += [SCDRandomUtil nextDouble] - 0.498;
        [dataSeries appendX:@(i) y:@(randomWalk)];
    }
    
    SCIFastLineRenderableSeries *rSeries = [SCIFastLineRenderableSeries new];
    rSeries.strokeStyle = [[SCISolidPenStyle alloc] initWithColorCode:color thickness: 1.0];
    rSeries.xAxisId = xAxisId;
    rSeries.yAxisId = yAxisId;
    rSeries.dataSeries = dataSeries;

    [SCIAnimations sweepSeries:rSeries duration:3.0 andEasingFunction:[SCICubicEase new]];
    
    return rSeries;
}

@end

// MultipleAxesChartView.swift

//******************************************************************************
// SCICHART® Copyright SciChart Ltd. 2011-2019. All rights reserved.
//
// Web: http://www.scichart.com
// Support: support@scichart.com
// Sales:   sales@scichart.com
//
// MultipleAxesChartView.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.
//******************************************************************************

class MultipleAxesChartView: SCDSingleChartViewController<SCIChartSurface> {
    
    let TopAxisId = "xTop"
    let BottomAxisId = "xBottom"
    let LeftAxisId = "yLeft"
    let RightAxisId = "yRight"
    
    override var associatedType: AnyClass { return SCIChartSurface.self }
    
    override var showDefaultModifiersInToolbar: Bool { return false }

    override func initExample() {
        let xTopAxis = SCINumericAxis()
        xTopAxis.axisId = TopAxisId
        xTopAxis.axisAlignment = .top
        xTopAxis.tickLabelStyle = SCIFontStyle(fontSize: 12, andTextColorCode: 0xFF279B27)
        xTopAxis.titleStyle = SCIFontStyle(fontSize: 18, andTextColorCode: 0xFF279B27)
        
        let xBottomAxis = SCINumericAxis()
        xBottomAxis.axisId = BottomAxisId
        xBottomAxis.axisAlignment = .bottom
        xBottomAxis.tickLabelStyle = SCIFontStyle(fontSize: 12, andTextColorCode: 0xFFFF1919)
        xBottomAxis.titleStyle = SCIFontStyle(fontSize: 18, andTextColorCode: 0xFFFF1919)

        let yLeftAxis = SCINumericAxis()
        yLeftAxis.axisId = LeftAxisId
        yLeftAxis.growBy = SCIDoubleRange.init(min: 0.1, max: 0.1)
        yLeftAxis.axisAlignment = .left
        yLeftAxis.tickLabelStyle = SCIFontStyle(fontSize: 12, andTextColorCode: 0xFFFC9C29)
        yLeftAxis.titleStyle = SCIFontStyle(fontSize: 18, andTextColorCode: 0xFFFC9C29)
        
        let yRightAxis = SCINumericAxis()
        yRightAxis.axisId = RightAxisId
        yRightAxis.growBy = SCIDoubleRange.init(min: 0.1, max: 0.1)
        yRightAxis.axisAlignment = .right
        yRightAxis.tickLabelStyle = SCIFontStyle(fontSize: 12, andTextColorCode: 0xFF4083B7)
        yRightAxis.titleStyle = SCIFontStyle(fontSize: 18, andTextColorCode: 0xFF4083B7)

        let modifierGroup = SCDExampleBaseViewController.createDefaultModifiers()
        modifierGroup.childModifiers.add(items: SCILegendModifier(), SCIXAxisDragModifier(), SCIYAxisDragModifier())
        
        SCIUpdateSuspender.usingWith(surface) {
            self.surface.xAxes.add(xTopAxis)
            self.surface.xAxes.add(xBottomAxis)
            self.surface.yAxes.add(yLeftAxis)
            self.surface.yAxes.add(yRightAxis)
            self.surface.renderableSeries.add(self.getRenderableSeriesWith(xAxisId: self.BottomAxisId, yAxisId: self.LeftAxisId, seriesName: "Red Line", colorCode: 0xFFFF1919))
            self.surface.renderableSeries.add(self.getRenderableSeriesWith(xAxisId: self.BottomAxisId, yAxisId: self.LeftAxisId, seriesName: "Green Line", colorCode: 0xFF279B27))
            self.surface.renderableSeries.add(self.getRenderableSeriesWith(xAxisId: self.TopAxisId, yAxisId: self.RightAxisId, seriesName: "Orange Line", colorCode: 0xFFFC9C29))
            self.surface.renderableSeries.add(self.getRenderableSeriesWith(xAxisId: self.TopAxisId, yAxisId: self.RightAxisId, seriesName: "Blue Line", colorCode: 0xFF4083B7))

            self.surface.chartModifiers.add(modifierGroup)
        }
    }
    
    fileprivate func getRenderableSeriesWith(xAxisId: String, yAxisId: String, seriesName: String, colorCode: UInt32) -> SCIFastLineRenderableSeries {
        let dataSeries = SCIXyDataSeries.init(xType: .double, yType: .double)
        dataSeries.seriesName = seriesName
        
        var randomWalk = 10.0
        for i in 0 ..< 150 {
            randomWalk += SCDRandomUtil.nextDouble() - 0.498;
            dataSeries.append(x: i, y: randomWalk);
        }
        
        let rSeries = SCIFastLineRenderableSeries();
        rSeries.strokeStyle = SCISolidPenStyle(color: colorCode, thickness: 1.0)
        rSeries.xAxisId = xAxisId
        rSeries.yAxisId = yAxisId
        rSeries.dataSeries = dataSeries
        
        SCIAnimations.sweep(rSeries, duration: 3.0, easingFunction: SCICubicEase())
        
        return rSeries
    }
}

< BACK TO ALL IOS & MACOS CHARTS CHART EXAMPLES