Quick Start Guide > Tutorials (Java Android) > Tutorial 08 - Adding Multiple Axis
Tutorial 08 - Adding Multiple Axis

In the previous tutorial we learned how to add a TextAnnotation on a SciChartSurface.

Now we are going to learn how to too a second YAxis.

SciChart supports unlimited axes This unlocks many possibilities , such as rotated (vertical) charts, mixed axes (have both the XAxis and YAxis on the left), horizontally or vertically stacked axes, etc.

The source code for this tutorial is on github.

To illustrate, 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 behavior work on both axis.

Adding a Second Y Axis

The procedure to add a second axis to a SciChartSurface is pretty much the same as with one axis with one difference. You must assign a unique string ID to all axes if there is more than one.

To see the axis to appear to the either side of a chart, you set AxisAlignment to AxisAlignment.Left, AxisAlignment.Right, etc. enumeration

Let's add another axis and align it to the left side of the chart (assuming the original one is 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:

Example Title
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:

Note that 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.

From the tutorial, 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 is shown 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

Here is related documentation for further reading:

See Also