SciChart.js JavaScript 2D Charts API > Axis APIs > Axis Layout - Inside and Central Axis
Axis Layout - Inside and Central Axis

SciChart allows you to customize how axes are placed around and within the surface.  Axes can be placed:

  • Outside the drawing area, called Outer Axes.  This is the default.  The drawing area is reduced to give space for the axes and their labels and titles.
  • Inside the drawing area, called Inner Axes.  The drawing area fills the entire space of the chart. 

Inner axes can either be around the edges of the area, or bound to a coordinate so they appear in the middle of the drawing area.  These are referred to as Central Axes.

Inner Axes

To create an Inner axis simply set isInnerAxis: true on the axis options:

Inner Axis Example

Copy Code
    import { NumericAxis } from "scichart/Charting/Visuals/Axis/NumericAxis";
    
    const xAxis = new NumericAxis(wasmContext, { isInnerAxis: true });
    // or 
    // const xAxis = new NumericAxis(wasmContext);
    // xAxis.isInnerAxis = true;

Now the x axis is an inner axis, while the y axis is the default outer axis. 

Configuring Inner Axis Position

You can bind the position of an inner axis to a differend place using the axisPosition property of the relevant LayoutStrategy on the LayoutManager.  These are:

  • LayoutManager.leftInnerAxesLayoutStrategy
  • LayoutManager.rightInnerAxesLayoutStrategy
  • LayoutManager.topInnerAxesLayoutStrategy
  • LayoutManager.bottomInnerAxesLayoutStrategy

The  coordinateMode property is an EInnerAxisPlacementCoordinateMode which is:

  • DataValue - axis will be placed at this data value on the orthogonal axis.
  • Pixel - axis will be placed at that pixel coordinate, relative to the top/left of the chart
  • Relative - a value between 0.0 and 1.0, where 0.o is the top/left and 1.0 is the bottom/right of the chart.

In the example below, note that the first x-Axis is Top aligned, so we need to set properties on topInnerAxesLayoutStrategy.  This axis will move vertically as the chart is panned as it is positioned by data value.  The second x-Axis is Bottom aligned, so we configure the bottomInnerAxesLayoutStrategy.  This uses Pixel coordinateMode, so it stays fixed as the chart is panned.

Positioning Inner Axis

Copy Code
import { EInnerAxisPlacementCoordinateMode } from "scichart/Charting/LayoutManager/EInnerAxisPlacementCoordinateMode";
const xAxis = new NumericAxis(wasmContext, { isInnerAxis: true, axisAlignment: EAxisAlignment.Top, axisBorder: { borderTop: 2, color: "steelblue" } });
sciChartSurface.layoutManager.topInnerAxesLayoutStrategy.coordinateMode = EInnerAxisPlacementCoordinateMode.DataValue;
sciChartSurface.layoutManager.topInnerAxesLayoutStrategy.axisPosition = 7;
const xAxis2 = new NumericAxis(wasmContext, { isInnerAxis: true, axisAlignment: EAxisAlignment.Bottom, axisBorder: { borderBottom: 2, color: "white" } });
sciChartSurface.layoutManager.bottomInnerAxesLayoutStrategy.coordinateMode = EInnerAxisPlacementCoordinateMode.Pixel;
sciChartSurface.layoutManager.bottomInnerAxesLayoutStrategy.axisPosition = 300;
const yAxis = new NumericAxis(wasmContext);
sciChartSurface.xAxes.add(xAxis, xAxis2);
sciChartSurface.yAxes.add(yAxis);
sciChartSurface.chartModifiers.add(new ZoomPanModifier());

Note also that for the top aligned axis, inner axis labels are placed below the axis line, so we need to set borderTop, and the opposite for a bottom aligned axis.

Central Axes

While it is possible to configure central axes using properties on the LayoutStrategies as above, for the standard case it is easier to use the CentralAxesLayoutManager.  This makes all axes inner, and places them at the centre of the chart. Just this code...

Central Axes

Copy Code
import { CentralAxesLayoutManager } from "scichart/Charting/LayoutManager/CentralAxesLayoutManager";
const { sciChartSurface, wasmContext } = await SciChartSurface.create(divElementId);
const xAxis = new NumericAxis(wasmContext, { isInnerAxis: true });
const yAxis = new NumericAxis(wasmContext);
sciChartSurface.xAxes.add(xAxis);
sciChartSurface.yAxes.add(yAxis);

 Produces this:

CentralAxesLayoutManager has some options you can use to configure the position of the horizontal and vertical axes, using the coordinateModes discussed above:

Configuring Central Axes

Copy Code
import { CentralAxesLayoutManager } from "scichart/Charting/LayoutManager/CentralAxesLayoutManager";
import { EInnerAxisPlacementCoordinateMode } from "scichart/Charting/LayoutManager/EInnerAxisPlacementCoordinateMode";
const options = {
    horizontalAxisPositionCoordinateMode: EInnerAxisPlacementCoordinateMode.DataValue,
    verticalAxisPositionCoordinateMode: EInnerAxisPlacementCoordinateMode.Pixel,
    horizontalAxisPosition: 3,
    verticalAxisPosition: 100,
};
sciChartSurface.layoutManager = new CentralAxesLayoutManager(options);

 

Handling Custom Axis Ids of Orthogonal Axes

If there are multiple Y or X Axes used on the chart, you should provide them with specific distinct Ids. As a result you may need to pass custom ids to Layout Strategies as a hint for which X axis should be for calculating the position of the Y axis and vice versa.

Custom Axis Ids

Copy Code
import { NumberRange } from "scichart/Core/NumberRange";
// ...
const ID_Y_AXIS_1 = "yAxis1";
const ID_Y_AXIS_2 = "yAxis2";
const xAxis = new NumericAxis(wasmContext, { isInnerAxis: true });
const yAxis1 = new NumericAxis(wasmContext, { id: ID_Y_AXIS_1 });
const yAxis2 = new NumericAxis(wasmContext, { id: ID_Y_AXIS_2, visibleRange: new NumberRange(-5, 5) });
sciChartSurface.layoutManager.bottomInnerAxesLayoutStrategy.orthogonalAxisId = ID_Y_AXIS_1;
// the xAxis will be positioned accordingly to value on the yAxis1
sciChartSurface.layoutManager.bottomInnerAxesLayoutStrategy.coordinateMode = EInnerAxisPlacementCoordinateMode.DataValue;
sciChartSurface.layoutManager.bottomInnerAxesLayoutStrategy.axisPosition = 3;

See Also