Quick Start Guide > Tutorials (Swift3) > Tutorial 04 - Adding Zooming, Panning behavior
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.

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

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.

NOTE: ChartModifiers are a classes which add behaviour to the chart, such as zooming, panning, tooltips, even legends and more. It is possible to create your own ChartModifiers, to link them together and to have composite behaviour on the chart. You can read about our powerful ChartModifierBase API here.

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. 

 

See Also