Quick Start Guide > Tutorials (Xamarin.iOS) > Tutorial 08 - Chart with Multiple Axes
Tutorial 08 - Chart with 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.


If you haven't already tried 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

Source code for this tutorial can be found at our Xamarin Examples Github Repository under Tutorials.iOS
The API to add a second YAxis is as follows:
Adding second YAxis
Copy Code
var yAxis = new SCINumericAxis();
yAxis.GrowBy = new SCIDoubleRange(min: 0.1, max: 0.1);
yAxis.AxisId = "firstYAxis";
var yLeftAxis = new SCINumericAxis();
yLeftAxis.AxisId = "secondaryYAxis";
yLeftAxis.AxisAlignment = SCIAxisAlignment.Left;
yLeftAxis.VisibleRange = new SCIDoubleRange(min: -2, max: 2);
yLeftAxis.AutoRange  = SCIAutoRange.Never;


Once you added the axis with custom ID, you have to update it for each entity that uses it - renderable series, modifiers, etc...

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 the BaseRenderableSeries.YAxisId on both scatter and line renderable series in code and restart the application:
registering scatter series on the left axis and line renderable series on the right
Copy Code
 void CreateRenderableSeries()
  _lineRenderableSeries = new SCIFastLineRenderableSeries();
  _lineRenderableSeries.DataSeries = _lineDataSeries;
  _lineRenderableSeries.YAxisId = "firstYAxis";
  _scatterRenderableSeries = new SCIXyScatterRenderableSeries();
  _scatterRenderableSeries.DataSeries = _scatterDataSeries;
  _scatterRenderableSeries.YAxisId = "secondaryYAxis";
void AddModifiers()
   var xAxisDragmodifier = new SCIXAxisDragModifier();
   xAxisDragmodifier.DragMode = SCIAxisDragMode.Pan;
   xAxisDragmodifier.ClipModeX = SCIClipMode.None;
   var yAxisDragmodifier = new SCIYAxisDragModifier();
   yAxisDragmodifier.DragMode = SCIAxisDragMode.Scale;
   yAxisDragmodifier.AxisId = "secondaryYAxis";
   var yAxisDragmodifierRight = new SCIYAxisDragModifier();
   yAxisDragmodifierRight.DragMode = SCIAxisDragMode.Scale;
   yAxisDragmodifierRight.AxisId = "firstYAxis";
   var extendZoomModifier = new SCIZoomExtentsModifier();
   var pinchZoomModifier = new SCIPinchZoomModifier();
   // Adding Rollover and Legend modifiers
   var rolloverModifier = new SCIRolloverModifier();
   var legendCollectionModifier = new SCILegendModifier();
   var groupModifier = new SCIChartModifierCollection();
   _surface.ChartModifiers = groupModifier;

We have also ste the Axis Id for YAxisDragModifier, so when you use it drag the Y axis (Left or Right) it will response to your gestures.

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
var customAnnotation = new SCICustomAnnotation();
if (_i % 100 == 0)
   customAnnotation.ContentView = new UIImageView();//(new CoreGraphics.CGRect(0, 0, 10, 10)) { Text = "Y", BackgroundColor = UIColor.LightGray };
   customAnnotation.X1Value = _i;
   customAnnotation.Y1Value = 0.5;
   customAnnotation.CoordinateMode = SCIAnnotationCoordinateMode.Absolute;
   customAnnotation.YAxisId = "firstYAxis";
   // adding new custom annotation into the annotationGroup property
   // removing annotations that are out of visible range
   var customAn = _annotationCollection[0] as SCICustomAnnotation;

   if ((double)customAn.X1Value < (_i - 500))
     // since the contentView is UIView element - we have to call removeFromSuperView method to remove it from screen

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.

Notice we've set SCIAnnotationCoordinateMode.Absolute value to customAnnotation.CoordinateMode variable; this coordinateMode value will place annotation right in the place with the coordinates we set X1 and Y1. Now run the application:

See Also