iOS & macOS Charting Documentation - SciChart iOS & macOS Charts SDK v4.x

Axis Layout - Stack Axes Vertically or Horizontally

It is possible to make axes to stack up vertically or horizontally with SciChart. It requires customization of the default chart layout process. Please refer to the Central Axis article to learn more about the layout processes and ways to customize them.

Default

Stacking Axes Vertically

In the code snippet below, a custom ISCIAxisLayoutStrategy is created for all the left-aligned axes that belong to a chart. Let’s discuss the methods which needs to be implemented:

Let’s try implement that and apply newly created layout strategy to a SCIDefaultLayoutManager.leftOuterAxesLayoutStrategy and then - to the SCIChartSurface:

@interface LeftAlignedOuterVerticallyStackedYAxisLayoutStrategy : SCIVerticalAxisLayoutStrategy @end @implementation LeftAlignedOuterVerticallyStackedYAxisLayoutStrategy - (void)measureAxesWithAvailableWidth:(CGFloat)width height:(CGFloat)height andChartLayoutState:(SCIChartLayoutState *)chartLayoutState { for (NSUInteger i = 0, count = self.axes.count; i < count; i++) { id axis = self.axes[i]; [axis updateAxisMeasurements]; CGFloat requiredAxisSize = [SCIVerticalAxisLayoutStrategy getRequiredAxisSizeFrom:axis.axisLayoutState]; chartLayoutState.leftOuterAreaSize = MAX(requiredAxisSize, chartLayoutState.leftOuterAreaSize); } } - (void)layoutWithLeft:(CGFloat)left top:(CGFloat)top right:(CGFloat)right bottom:(CGFloat)bottom { NSUInteger count = self.axes.count; CGFloat height = bottom - top; CGFloat axisSize = height / count; CGFloat topPlacement = top; for (int i = 0; i < count; i++) { id axis = self.axes[i]; SCIAxisLayoutState *axisLayoutState = axis.axisLayoutState; CGFloat bottomPlacement = topPlacement + axisSize; CGFloat requiredAxisSize = [SCIVerticalAxisLayoutStrategy getRequiredAxisSizeFrom:axisLayoutState]; [axis layoutAreaWithLeft:right - requiredAxisSize + axisLayoutState.additionalLeftSize top:topPlacement right:right - axisLayoutState.additionalRightSize bottom:bottomPlacement]; topPlacement = bottomPlacement; } } @end … // Create and set new Layout Strategy SCIDefaultLayoutManager *layoutManager = [SCIDefaultLayoutManager new]; layoutManager.leftOuterAxisLayoutStrategy = [LeftAlignedOuterVerticallyStackedYAxisLayoutStrategy new]; self.surface.layoutManager = layoutManager;
class LeftAlignedOuterVerticallyStackedYAxisLayoutStrategy: SCIVerticalAxisLayoutStrategy { override func measureAxes(withAvailableWidth width: CGFloat, height: CGFloat, andChartLayoutState chartLayoutState: SCIChartLayoutState!) { for i in 0 ..&lh; axes.count { let axis = axes[i] as! ISCIAxis axis.updateMeasurements() let requiredAxisSize = SCIVerticalAxisLayoutStrategy.getRequiredAxisSize(from: axis.axisLayoutState) chartLayoutState.leftOuterAreaSize = max(requiredAxisSize, chartLayoutState.leftOuterAreaSize) } } override func layout(withLeft left: CGFloat, top: CGFloat, right: CGFloat, bottom: CGFloat) { let count = axes.count let height = bottom - top let axisSize = height / CGFloat(count) var topPlacement = top for i in 0 ..&lh; count { let axis = axes[i] as! ISCIAxis let axisLayoutState = axis.axisLayoutState! let bottomPlacement = topPlacement + axisSize let requiredAxisSize = SCIVerticalAxisLayoutStrategy.getRequiredAxisSize(from: axisLayoutState) axis.layoutArea(withLeft: right - requiredAxisSize + axisLayoutState.additionalLeftSize, top: topPlacement, right: right - axisLayoutState.additionalRightSize, bottom: bottomPlacement) topPlacement = bottomPlacement } } } … // Create and set new Layout Strategy let layoutManager = SCIDefaultLayoutManager() layoutManager.leftOuterAxisLayoutStrategy = LeftAlignedOuterVerticallyStackedYAxisLayoutStrategy() surface.layoutManager = layoutManager
class LeftAlignedOuterVerticallyStackedYAxisLayoutStrategy : SCIVerticalAxisLayoutStrategy { public override void MeasureAxesWithAvailableWidth(nfloat width, nfloat height, SCIChartLayoutState chartLayoutState) { for (nuint i = 0; i < Axes.Count; i++) { var axis = Axes[i]; axis.UpdateAxisMeasurements(); var requiredAxisSize = GetRequiredAxisSizeFrom(axis.AxisLayoutState); chartLayoutState.LeftOuterAreaSize = (nfloat)Math.Max(requiredAxisSize, chartLayoutState.LeftOuterAreaSize); } } public override void LayoutWithLeft(nfloat left, nfloat top, nfloat right, nfloat bottom) { var count = Axes.Count; var height = bottom - top; var axisSize = height / count; var topPlacement = top; foreach (var axis in Axes) { var axisLayoutState = axis.AxisLayoutState; var bottomPlacement = topPlacement + axisSize; var requiredAxisSize = GetRequiredAxisSizeFrom(axisLayoutState); axis.LayoutArea(right - requiredAxisSize + axisLayoutState.AdditionalLeftSize, topPlacement, right - axisLayoutState.AdditionalLeftSize, bottomPlacement); topPlacement = bottomPlacement; } } } ... // Create and set new Layout Strategy var layoutManager = new SCIDefaultLayoutManager(); layoutManager.LeftOuterAxisLayoutStrategy = LeftAlignedOuterVerticallyStackedYAxisLayoutStrategy(); Surface.LayoutManager = layoutManager;

Please refer to the Vertically Stacked Y Axes to find the complete code sample.

For more examples of custom axes layouts, please refer to the Central Axis article.