Quick Start Guide > Tutorials (Swift3) > Tutorial 08 - Adding Multiple Axes
Tutorial 08 - Adding Multiple Axes

In our series of tutorials, so far all the charts have had one XAxis and one YAxis.

SciChart supports unlimited, multiple X, and Y Axis on the left, right, bottom and top of the chart. You can change Axis alignment, rotate charts, and mix axis (have both XAxis/YAxis on the left). The possibilities are literally endless!

In this tutorial, we are going to add a second YAxis to the chart. We are going to show how to register annotations and line series on the second axis. We are also going to show how to ensure Axis drag behaviors work on both axis.

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


If you haven't already you will need to review the following tutorials, as we're working straight from these:

Or, if you're in a hurry, take the code from the end of 'Adding Annotations' or you can download it from our Tutorials Git repository and let's get started.

Adding a Second YAxis

The API to add a second YAxis is as follows:
adding second YAxis
Copy Code
        // adding some paddding for Y axis
        let yAxis = SCINumericAxis()
        yAxis.growBy = SCIDoubleRange(min: SCIGeneric(0.1), max: SCIGeneric(0.1))
        yAxis.axisId = "firstYAxis"
        let yLeftAxis = SCINumericAxis()
        yLeftAxis.axisId = "secondaryYAxis"
        yLeftAxis.axisAlignment = .left
        yLeftAxis.visibleRange = SCIDoubleRange(min: SCIGeneric(-2), max: SCIGeneric(2))
        yLeftAxis.autoRange = .never

If you run the application now, you should see a YAxis on the left.

Registering RenderableSeries on the second YAxis

We want to now reigster one of the series on the left YAxis. To do this, we set RenderableSeries.YAxisId = Axis.Id. By default all axis have a default axis ID. In single axis systems there is no need to set an AxisId in scichart. As soon as you have a secondary axis, you need to start setting Axis Ids. Change just the BaseRenderableSeries.YAxisId on the scatter series in code and restart the application:
registering scatter series on the left axis and line renderable series on the right
Copy Code
   func createRenderableSeries(){
        lineRenderableSeries = SCIFastLineRenderableSeries()
        lineRenderableSeries.dataSeries = lineDataSeries
        lineRenderableSeries.yAxisId = "firstYAxis"
        scatterRenderableSeries = SCIXyScatterRenderableSeries()
        scatterRenderableSeries.dataSeries = scatterDataSeries
        scatterRenderableSeries.yAxisId = "secondaryYAxis"

Run the application and you will now notice that the Scatter series has been scaled to half the size. This is because the Secondary YAxis has a VisibleRange of -2, +2 but the series data still has values in the range -1, +1.

Registering Annotations on the Secondary YAxis

Annotations also need to be registered on a YAxis and XAxis. By default the AnnotationBase.XAxisId and AnnotationBase.YAxisId matches the AxisBase.DefaultAxisId.

As soon as you change an Axis.Id you need to consider whether you need to update the XAxisId or YAxisId properties on RenderableSeriesChartModifiers or Annotations. Change the code where you add Annotaitons to the chart as follows:

adding second YAxis
Copy Code
customAnnotation.contentView = customAnnotationContentView
customAnnotation.x1 = SCIGeneric(i)
customAnnotation.y1 = SCIGeneric(0.0)
customAnnotation.coordinateMode = .absolute
if (i%200 == 0){
   customAnnotation.yAxisId = "secondaryYAxis"

We're adding an annotation every 100 datapoints. Every alternate annotation we now change the YAxisId between AxisBase.DefaultAxisId or "Axis2" - the Id of the secondary YAxis. Now run the application:

Updating Y axis drag modifiers

Now, the last thing is to update the method, where we add chart modifiers. To have an ability to scale/pan both Y axes we have to add to YAxisDragModifiers, just like as follows:

adding second YAxis
Copy Code
let yAxisDragmodifier = SCIYAxisDragModifier()
yAxisDragmodifier.dragMode = .scale
yAxisDragmodifier.axisId = "firstYAxis"
let yAxisSecondaryDragmodifier = SCIYAxisDragModifier()
yAxisSecondaryDragmodifier.dragMode = .scale
yAxisSecondaryDragmodifier.axisId = "secondaryYAxis"


let groupModifier = SCIModifierGroup(childModifiers: [xAxisDragmodifier, yAxisDragmodifier, yAxisSecondaryDragmodifier, pinchZoomModifier, extendZoomModifier, legend, rolloverModifier])

Now run the app. If you drag the left YAxis up and down, vs. drag the right YAxis up and down, you can see now which series and annotations are registered on which YAxis.

See Also