SciChart supports placing axes in the centre of a chart:
The Layout System
This requires a customization of the default LayoutManager. This class is responsible for positioning axes on a chart. The layout process consists of two passes for every axis, a measure pass and a layout pass. The LayoutManager conducts this process, doing calculations and providing all the necessary data to its IAxisLayoutStrategy fields. Every IAxisLayoutStrategy field handles a specific AxisAlignment case and is responsible for placing axes with corresponding AxisAlignment inside the boundaries provided by the LayoutManager.
The layout takes place in the LayoutManager.onLayoutChart() method. It orderly calls IAxisLayoutStrategy.measureAxes() and outStrategy.layoutAxes() during the measure and layout passes and returns evaluated viewport size as the result.
The layout process is triggered by a SciChartSurface in response to different state changes. It is an essential part of a render process.
Customizing Layout of Axes
Usually you don't need to create a custom LayoutManager, but rather to provide a custom IAxisLayoutStrategy for a specific AxisAlignment mode, e.g. for bottom axes layout or right axes layout, or both. It is possible to extend an existing IAxisLayoutStrategy class and change its behavior to better serve your purposes. Please find a list of the existing strategies below:
- TopAlignmentOuterAxisLayoutStrategy
- TopAlignmentInnerAxisLayoutStrategy
- BottomAlignmentOuterAxisLayoutStrategy
- BottomAlignmentInnerAxisLayoutStrategy
- LeftAlignmentOuterAxisLayoutStrategy
- LeftAlignmentInnerAxisLayoutStrategy
- RightAlignmentOuterAxisLayoutStrategy
- RightAlignmentInnerAxisLayoutStrategy
Pinned Axes
The following code extends the TopAlignmentOuterAxisLayoutStrategy class and makes the stack of the top-aligned X axes to start exactly at the center of a chart:
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:
In the result, the X Axis should be placed at the center of a chart. It should look very similar to this:
Floating Axes
Another possible scenario, floating axes, can be found in the example called Shifted Axes from the SciChart Android Example Suite. In this case each axis is pinned to 0 value of the other axis. To achieve this, the pixel coordinate of 0 data value is looked for during every layout pass, using the Coordinate Transformation API:
As it can be seen in the example, both axes are pinned to a given data value, not to a specific position inside the chart area. Thus they will adjust their positions accordingly to VisibleRange changes Please refer to the Shifted Axes example to find the complete code sample.
For more examples of custom axes layouts, please refer to the Stack Axes Vertically or Horizontally article.
Advanced Axes Layout Customization
For more advanced layout customization it is possible to override the whole layout process. To achieve this, a custom LayoutManager is required with a custom layout process implemented in the LayoutManager.onLayoutChart() method.