iOS Charting Documentation - SciChart
Tutorial 04 - Adding Zooming, Panning behavior

Following on from Tutorial 03 - Adding Series to a Chart where we created some series, we will now add zooming, panning behaviors to the chart.

Adding Zooming, Panning Behaviors

So far in the tutorial series, we have created a new chart, added an XAxis, YAxis and also some series.

Tutorials Repository

As it was mentioned previously - we've created Git repository with all Tutorials. So you can clone/download the appropriate project you need!

We're going to extend this now to add zoom, pan behaviour to the chart. Modify the code from Tutorial 03 - Adding Series to the chart as follows.

Adding ZoomExtents, AxisDrag, PinchZoom modifiers
Copy Code
    func addModifiers(){
        let xAxisDragmodifier = SCIXAxisDragModifier()
        xAxisDragmodifier.dragMode = .pan
        xAxisDragmodifier.clipModeX = .none
        
        let yAxisDragmodifier = SCIYAxisDragModifier()
        yAxisDragmodifier.dragMode = .pan
        
        let extendZoomModifier = SCIZoomExtentsModifier()
        let pinchZoomModifier = SCIPinchZoomModifier()
        
        let groupModifier = SCIChartModifierCollection(childModifiers: [xAxisDragmodifier, yAxisDragmodifier, pinchZoomModifier, extendZoomModifier])
        
        sciChartSurface?.chartModifiers = groupModifier
    }

The above code adds a number of ChartModifiers to the SciChartSurface.

As well as in the previous tutorial, let's call this method in viewDidLoad method. Edit your code as follows:

Adding ZoomExtents, AxisDrag, PinchZoom, Rollover modifiers
Copy Code
...
            override func viewDidLoad() {
                super.viewDidLoad()
               
                // Do any additional setup after loading the view, typically from a nib.
               
                sciChartSurface = SCIChartSurface(frame: self.view.bounds)
                sciChartSurface?.translatesAutoresizingMaskIntoConstraints = true
               
                self.view.addSubview(sciChartSurface!)
               
                sciChartSurface?.xAxes.add(SCINumericAxis())
                sciChartSurface?.yAxes.add(SCINumericAxis())
               
                createDataSeries()
                createRenderableSeries()
                addModifiers()
            } 
        ...

 

Now build and run the chart!

This is what you should see. Try dragging axis, tapping and double tapping on the chart. 

Further Reading...

Each modifier above has it's own configuration properties and are worthy of an article each! You can find out more be clicking the links below.