SciChart Android 2D Charts API > Axis APIs > Chart Layout - Stack Axes Vertically or Horizontally
Chart Layout - Stack Axes Vertically or Horizontally

It is possible to make axes to stack up vertically or horizontally with SciChart:

To achieve this, a customization of the default chart layout is required. Please refer to the Placing Axis Central in the Chart article to learn more about the layout processes and ways to customize them.

Stacking Axes Vertically

In the code snippet below, a custom IAxisLayoutStrategy is created for all the left-aligned axes that belong to a chart.

In the measureAxes() method override the size of the left axes area is calculated, setting the corresponding field of the AxisLayoutState object. It provides a value feedback to the LayoutManager after the measure pass ends.

In the layoutAxes() method override every axis is given a position at the top of the previous one.

private static class LeftAlignedOuterVerticallyStackedYAxisLayoutStrategy extends VerticalAxisLayoutStrategy {
    @Override
    public void measureAxes(int availableWidth, int availableHeight, ChartLayoutState chartLayoutState) {
         for (int i = 0, size = axes.size(); i < size; i++) {
            final IAxis axis = axes.get(i);
            axis.updateAxisMeasurements();
            final AxisLayoutState axisLayoutState = axis.getAxisLayoutState();
            chartLayoutState.leftOuterAreaSize = Math.max(getRequiredAxisSize(axisLayoutState), chartLayoutState.leftOuterAreaSize);
        }
    }
    @Override
    public void layoutAxes(int left, int top, int right, int bottom) {
        final int size = axes.size();
        final int height = bottom - top;
        final int axisSize = height / size;
        int topPlacement = top;
        for (int i = 0; i < size; i++) {
            final IAxis axis = axes.get(i);
            final AxisLayoutState axisLayoutState = axis.getAxisLayoutState();
            final int bottomPlacement = topPlacement + axisSize;
            axis.layoutArea(right - getRequiredAxisSize(axisLayoutState), topPlacement, right, bottomPlacement);
            topPlacement = bottomPlacement;
        }
    }
}

To apply the newly created layout strategy, create a new DefaultLayoutManager instance and set the corresponding field. It can be done using the DefaultLayoutManager.Builder helper. Then assign the LayoutManager to a SciChartSurface:

SciChartSurface chart = new SciChartSurface(getContext());
// create and configure a DefaultLayoutManager
DefaultLayoutManager layoutManager = new DefaultLayoutManager.Builder()
    .setLeftOuterAxesLayoutStrategy(new LeftAlignedOuterVerticallyStackedYAxisLayoutStrategy())
    .build();

// assign it to the chart
chart.setLayoutManager(layoutManager);

 To full code sample can be found in the Vertically Stacked Y Axes example. For more examples of custom axes layouts, please refer to the Placing Axis Central in the Chart article.

See Also