iOS and Xamarin.iOS Charting Documentation - SciChart iOS Charts and Xamarin Charts SDK v2.x
Tutorial 02 - Creating a SciChartSurface

In this Tutorial we will continue to familiarize with SciChart API. To make it easier for you to start with playing around with SciChart you can download the Tutorial Project from this open Git repository.

Using sources from Git repository

Just in case you are using our project from Git repository - you have to follow the instructions in our Repository page.

The SciChartSurface Type

The root 2D chart control is called the SciChartSurface. This is the SciChart object you will be adding to your applications wherever you need a chart. You can add more than one SciChartSurface, you can configure them independently, and you can link them together.

First up, let’s start by declaring one:

Declaring a SciChartSurface Instance

Click on the ViewController file in navigation panel. Following step after Linking the SciChart framework is to add instance of SciChartSurface class. This can be done as follows:

Declaring a SciChartSurface instance
Copy Code
import UIKit
import SciChart
class ViewController: UIViewController {
   
    var sciChartSurface: SCIChartSurface?
   
    override func viewDidLoad() {
        super.viewDidLoad()
       
        // Create a SCIChartSurface. This is a UIView so can be added directly to the UI
        sciChartSurface = SCIChartSurface(frame: self.view.bounds)
        sciChartSurface?.translatesAutoresizingMaskIntoConstraints = true
       
        // Add the SCIChartSurface as a subview
        self.view.addSubview(sciChartSurface!)
       
        // Create an XAxis and YAxis. This step is mandatory before creating series
        sciChartSurface?.xAxes.add(SCINumericAxis())
        sciChartSurface?.yAxes.add(SCINumericAxis())
        // That's it! The SCIChartSurface will now display on the screen with default axis ranges
    }
}

The above code declares a SCIChartSurface instance and adds a (numeric) X and Y Axis.

Important thing here is that you should add both X and Y axes to see a chart on your screen! In the case you added only one axis - you will see the black screen.

Congratulations, you have just created your first example using SciChart!
At this point you have to be able to see the empty SciChart Surface