Quick Start Guide > Tutorials (Swift3) > Tutorial 02 - Creating a SciChartSurface
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.

Source code for this tutorial can be found at our Github Repository under v2.x > Tutorials


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. The following step after Linking the SciChart framework is to add a 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() {
        // 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
        // Create an XAxis and YAxis. This step is mandatory before creating series
        // 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