Android & Xamarin.Android Charting Documentation - SciChart Android Charts SDK v2.x
Xamarin Tutorial 08 - Adding Multiple Axes

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
chart.YAxes.Add(yAxis);

// Add secondaryYAxis to the YAxes collection of the chart
chart.YAxes.Add(secondaryYAxis);

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