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

This article is a continuation of a tutorial series on how to create a chart using SciChart Android. In the previous tutorial we learned how to add chart annotations onto a SciChartSurface. It can be found at this link: Tutorial 07 - Adding Annotations.

So far in this series, our chart has had only one XAxis and one YAxis. However, SciChart supports unlimited, multiple X, and Y Axis on the left, right, bottom and top of the chart. This unlocks many possible variants of a chart layout, such as rotated (vertical) charts, mixed axes (have both XAxis/YAxis on the left), horizontally or vertically stacked axes, etc. 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.

Revision

If you have not already, you will need to review the following tutorials, as we are working straight from these:

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 enlarge its VisibleRange by 40% setting a GrowBy value on it:

Copy Code
// Create a numeric axis, right-aligned
final IAxis yAxisRight = sciChartBuilder.newNumericAxis()
        .withAxisTitle("Primary")
         // Assign a unique ID to the axis
        .withAxisId("primaryYAxis")
        .withAxisAlignment(AxisAlignment.Right)
        .build();

// Create another numeric axis, left-aligned
final IAxis yAxisLeft = sciChartBuilder.newNumericAxis()
        .withAxisTitle("Secondary")
         // Assign a unique ID to the axis
        .withAxisId("secondaryYAxis")
        .withAxisAlignment(AxisAlignment.Left)
        .withGrowBy(0.2,0.2)
        .build();

// Add both Y axes to the YAxes collection of the surface
Collections.addAll(surface.getYAxes(), yAxisLeft, yAxisRight);

Now we can see the second axis in our application:

However, RenderableSeries and Annotations don't get rendered now.

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 attach one series to the right axis and the other to the left axis, passing corresponding IDs to the RenderableSeries:

Copy Code
// Create and configure a line series
final IRenderableSeries lineSeries = sciChartBuilder.newLineSeries()
        .withDataSeries(lineData)
        // Register on a particular axis using its ID
        .withYAxisId("primaryYAxis")
        .withStrokeStyle(ColorUtil.LightBlue, 2f, true)
        .build();

// Create and configure a scatter series
final IRenderableSeries scatterSeries = sciChartBuilder.newScatterSeries()
        .withDataSeries(scatterData)
        // Register on a particular axis using its ID
        .withYAxisId("secondaryYAxis")
        .withPointMarker(pointMarker)
        .build();

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 IDs to annotations in on our chart in this way:

Copy Code
TextAnnotation marker = sciChartBuilder.newTextAnnotation()
        // Register on a particular axis using its ID
        .withYAxisId("primaryYAxis")
        .withIsEditable(false)
        .withText("Text")
        .withBackgroundColor(ColorUtil.Green)
        .withX1(x)
        .withY1(0.0)
        .withVerticalAnchorPoint(VerticalAnchorPoint.Center)
        .withHorizontalAnchorPoint(HorizontalAnchorPoint.Center)
        .withFontStyle(20, ColorUtil.White)
        .withZIndex(1)
        .build();

Now we can see the annotations on our chart again:

 

Further Reading

In the dedicated section of our documentation you can learn more about supported chart layouts with axes and other axis features. Please find the links below:

See Also