SciChart Android 2D Charts API > SciChart Android Basics > Adding an Axis to a SciChartSurface
Adding an Axis to a SciChartSurface

In the previous article we touched on adding a single X and Y Axis to a SciChartSurface. With SciChart you can also have unlimited left, right, top or bottom X or Y Axes.

You can also place axes in the centre of the chart or swap X and Y axes over to create a vertical chart. Please see these examples from the Android Examples Suite for reference:

Axes can be added to either the XAxes or YAxes collection of SciChartSurface. In case of having multiple X or Y axes, every axis should have a unique String ID assigned to it. All axes are positioned on a chart according to their AxisAlignment.

Adding an Axis

To add an axis to a SciChartSurface, use the following code:

// find the surface by id
SciChartSurface surface = (SciChartSurface) view.findViewById(R.id.chart);

// create numeric X axis
IAxis xAxis = new NumericAxis(getActivity());

// create numeric Y axis
IAxis yAxis = new NumericAxis(getActivity());

// add the Y and X axes to the axis collections of the surface
Collections.addAll(surface.getXAxes(), xAxis);
Collections.addAll(surface.getYAxes(), yAxis);

Aligning an Axis Inside a Chart

To change the position of an axis, set AxisAlignment:

// specifies that X Axis should appear to the bottom
xAxis.setAxisAlignment(AxisAlignment.Bottom);

// specifies that Y Axis should appear to the left
yAxis.setAxisAlignment(AxisAlignment.Left);

Also refer to the Create a Vertical Chart article or the Vertical Chart example to learn how to create Vertical (Rotated) Charts.

Changing Axis Direction

Pointing an axis inward or outward requires setting IsCenterAxis on an axis. By default, it is set to False, thus axis labels and ticks are turned outside a chart.

NumericAxis xAxis = new NumericAxis(getActivity());

// specifies that the axis should be pointed inward
// labels and ticks will overlay a chart area
xAxis.setIsCenterAxis(true);

 

Placing an Axis Central

Placing an axis in the center of a chart is more complicated though. It requires changes to the layout process in LayoutManager to specify the exact axis position inside a chart area. Please refer to the Placing Axis Central in the Chart article or the Shifted Axes example for more info.

Adding Multiple Axes

Similarly, multiple X or Y axes can be added to a SciChartSurface. Although, it is recommended that unique IDs are assigned to every axis:

//Create a left-aligned Y axis
final IAxis yLeftAxis1 = new NumericAxis(getActivity());
yLeftAxis1.setAxisAlignment(AxisAlignment.Left);
yLeftAxis1.setAxisId(“Y Left Axis 1”);

//Create another left-aligned Y axis
final IAxis yLeftAxis2 = new NumericAxis(getActivity());
yLeftAxis2.setAxisAlignment(AxisAlignment.Left);
yLeftAxis2.setAxisId(“Y Left Axis 2”);

//Create a right-aligned Y axis
final IAxis yRightAxis1 = new NumericAxis(getActivity());
yRightAxis1.setAxisAlignment(AxisAlignment.Right);
yRightAxis1.setAxisId(“Y Right Axis 1”);

//Create another right-aligned Y axis
final IAxis yRightAxis2 = new NumericAxis(getActivity());
yRightAxis2.setAxisAlignment(AxisAlignment.Right);
yRightAxis2.setAxisId(“Y Right Axis 2”);

// Add all the axes to the YAxis Collection of SciChartSurface
Collections.addAll(surface.getYAxes(), yLeftAxis1, yLeftAxis2, yRightAxis1, yRightAxis2);

 

Stacking Multiple Axes Vertically/Horizontally

It is possible to configure chart layout to have axes placed one next to another vertically or horizontally. This requires changes to the layout process in LayoutManager. Please refer to the Placing Axis Central in the Chart article or the Vertically Stacked Y Axes example for more info.

 

Using Axis Builders

 Also an axis can be created and configured using the chart builders factory:

IAxis xAxis = sciChartBuilder.newNumericAxis()
        .withAxisAlignment(AxisAlignment.Bottom)
        .withAxisId(“Y Left Axis 1”)
        .withAxisTitle("X Axis Title")
        .withVisibleRange(-5,15)
        .build();

NOTE: Every RenderableSeries (chart types e.g. LineCandlestickColumn) and every Annotation (Android Views laid over the chart) and some ChartModifiers (zoompan behaviours) requires to be measured against/attached to a particular axis. You have to specify the ID of the axis for them using the setYAxisId and setXAxisId methods.


However, If you have only a single X and Y Axis you never have to set these ID properties. This is required only in case of multiple axis. More on that later…

 

See Also