Quick Start Guide > Tutorials (Xamarin Android) > Xamarin Tutorial 08 - Adding Multiple Axes
Xamarin Tutorial 08 - Adding Multiple Axes
Source code for this tutorial can be found at our SciChart.Android.Examples Github Repository

Adding a Second Y Axis

To add one more axis to a SciChartSurface, you have to do pretty much the same as with one axis. There is one thing to remember though. You must assign a unique string ID to all your axes if there are more than one.

If you want the axis to appear to the either side of a chart, you have to set AxisAlignment to a corresponding value. Lets add another axis and align it to the left side of the chart (assuming the original one if placed to the right). To have a different scale on the secondary axis, we are going to set its VisibleRange on it:

Add Second Axis to the Chart
Copy Code
// Create a numeric Y axis
var yAxis = new NumericAxis(this)
     AxisTitle = "Value",
     VisibleRange = new DoubleRange(-1, 1)

// Create a secondary numeric Y Axis
var secondaryYAxis = new NumericAxis(this)
     AxisTitle = "Secondary",
     AxisId = "SecondaryAxis",
     AxisAlignment = AxisAlignment.Left,
     VisibleRange = new DoubleRange(-2, 2)

// Add yAxis to the YAxes collection of the chart

// Add secondaryYAxis to the YAxes collection of the chart

Now we can see second axis in our application

Registering RenderableSeries on an Axis

If there are several Y or X axes, you need to register other chart parts, like RenderableSeries and Annotations, on a particular axis to be measured against its scale. So we have to do in our application. For the tutorial's sake, we are going to leave one series attached to axis with default axis id (the right axis) and the other to the left axis, passing corresponding ID to the RenderableSeries:

Adding RenderableSeries for secondary Axis
Copy Code
// Create line series with data appended into lineData
var lineSeries = new FastLineRenderableSeries()
     DataSeries = lineData,
     StrokeStyle = new SolidPenStyle(Color.LightBlue, 2)

// Create scatter series with data appended into scatterData
var scatterSeries = new XyScatterRenderableSeries()
     DataSeries = scatterData,
     PointMarker = new EllipsePointMarker()
         Width = 10,
         Height = 10,
         StrokeStyle = new SolidPenStyle(Color.Green, 2),
         FillStyle = new SolidBrushStyle(Color.LightBlue)
     YAxisId = "SecondaryAxis"

The resulting chart should look like on the screenshot below:

Registering Annotations on an Axis

Annotations also need to be registered on a certain axis in a multi-axis scenario. So we are going to assign the axis ID to annotations in on our chart in this way:

Adding Annotations for the secondary Axis
Copy Code
// create text annotation with label
var label = new TextAnnotation(this)
     Text = "N",
     X1Value = x,
     Y1Value = 0,
     HorizontalAnchorPoint = HorizontalAnchorPoint.Center,
     VerticalAnchorPoint = VerticalAnchorPoint.Center,
     FontStyle = new FontStyle(20, Color.White),
     Background = new ColorDrawable(Color.DarkGreen),
     ZIndex = 1,
     YAxisId = x%200 == 0 ? AxisBase.DefaultAxisId : "SecondaryAxis"

Now we can see the annotations on our chart again:


See Also