SciChart.js JavaScript 2D Charts API > Axis APIs > Axis Alignment - Setting Axis Alignment
Axis Alignment - Setting Axis Alignment

SciChart.js supports unlimited, multiple X or Y axis which can be aligned to the Right, Left, Top, Bottom sides of a chart. Axis may be placed by setting the AxisBase2D.axisAlignment property.

Example Title
Copy Code
const { sciChartSurface, wasmContext } = await SciChartSurface.create(divElementId);
const ID_X_AXIS_2 = "xAxis2";
const ID_Y_AXIS_2 = "yAxis2";
const setXAxis1 = () => {
    const xAxis = new NumericAxis(wasmContext);
    xAxis.axisAlignment = EAxisAlignment.Top;
    xAxis.axisTitle = "Top Axis";
    xAxis.titleStyle = {
        color: "#3333ff",
        fontSize: 40,
        fontFamily: "Courier New"
    };
    sciChartSurface.xAxes.add(xAxis);
};
const setXAxis2 = () => {
    const xAxis = new NumericAxis(wasmContext);
    xAxis.id = ID_X_AXIS_2;
    xAxis.axisAlignment = EAxisAlignment.Bottom;
    xAxis.axisTitle = "Bottom Axis";
    sciChartSurface.xAxes.add(xAxis);
};
const setYAxis1 = () => {
    const yAxis = new NumericAxis(wasmContext);
    yAxis.axisAlignment = EAxisAlignment.Left;
    yAxis.axisTitle = "Left Axis";
    sciChartSurface.yAxes.add(yAxis);
};
const setYAxis2 = () => {
    const yAxis = new NumericAxis(wasmContext);
    yAxis.id = ID_Y_AXIS_2;
    yAxis.axisAlignment = EAxisAlignment.Right;
    yAxis.axisTitle = "Right Axis";
    sciChartSurface.yAxes.add(yAxis);
};
setXAxis1();
setXAxis2();
setYAxis1();
setYAxis2();

This code results in the following configuration of axis. Also seen in our Multiple Axis Demo.

 

Multiple X,Y Axis in a JavaScript Chart with left, top, right, bottom alignment

Attaching Chart Series to an Axis 

Every RenderableSeries (the chart types in SciChart.js e.g. Line, Candlestick, Column) and every Annotation (Trendlines, text or markers laid over the chart) and some ChartModifiers (zoom, pan behaviours) need to be attached to a particular axis.

The link between series and axis is done via AxisCore.id, and BaseRenderableSeries.xAxisId and BaseRenderableSeries.yAxisId properties.

With a single X,Y Axis you never have to set these properties. All of them have a default value which attaches the series to the default axis.

However, in a multiple axis scenario, series must be attached to an axis. To do this, use code like this below.

Multiple Axis example
Copy Code
const { sciChartSurface, wasmContext } = await SciChartSurface.create(divElementId);
const setXAxis1 = () => {
    const xAxis = new NumericAxis(wasmContext);
    xAxis.id = "TopXAxisId";
    xAxis.axisAlignment = EAxisAlignment.Top;
    xAxis.axisTitle = "Top Axis";
    xAxis.titleStyle = {
        color: "#B200FF"
    };
    sciChartSurface.xAxes.add(xAxis);
};
const setXAxis2 = () => {
    const xAxis = new NumericAxis(wasmContext);
    xAxis.id = "BottomXAxisId";
    xAxis.axisAlignment = EAxisAlignment.Bottom;
    xAxis.axisTitle = "Bottom Axis";
    xAxis.titleStyle = {
        color: "#ff0000"
    };
    sciChartSurface.xAxes.add(xAxis);
};
const setYAxis1 = () => {
    const yAxis = new NumericAxis(wasmContext);
    yAxis.id = "LeftYAxisId";
    yAxis.axisAlignment = EAxisAlignment.Left;
    yAxis.axisTitle = "Left Axis";
    yAxis.titleStyle = {
        color: "#ff0000"
    };
    sciChartSurface.yAxes.add(yAxis);
};
const setYAxis2 = () => {
    const yAxis = new NumericAxis(wasmContext);
    yAxis.id = "RightYAxisId";
    yAxis.axisAlignment = EAxisAlignment.Right;
    yAxis.axisTitle = "Right Axis";
    yAxis.titleStyle = {
        color: "#B200FF"
    };
    sciChartSurface.yAxes.add(yAxis);
};
const setSeries1 = () => {
    const lineSeries = new FastLineRenderableSeries(wasmContext, { stroke: "#ff0000" });
    lineSeries.xAxisId = "BottomXAxisId";
    lineSeries.yAxisId = "LeftYAxisId";
    lineSeries.strokeThickness = 3;
    sciChartSurface.renderableSeries.add(lineSeries);
    const lineData = new XyDataSeries(wasmContext);
    // Define line data
    const iStep = 20;
    const fAmpltude = 100.0;
    const fFrequency = 1.0;
    for (let i = 0; i < 1000; i += iStep) {
        lineData.append(i, Math.sin((fFrequency * i * Math.PI) / 180.0) * fAmpltude);
    }
    lineSeries.dataSeries = lineData;
};
const setSeries2 = () => {
    const lineSeries = new FastLineRenderableSeries(wasmContext, { stroke: "#B200FF" });
    lineSeries.xAxisId = "TopXAxisId";
    lineSeries.yAxisId = "RightYAxisId";
    lineSeries.strokeThickness = 3;
    sciChartSurface.renderableSeries.add(lineSeries);
    const lineData = new XyDataSeries(wasmContext);
    // Define line data
    const iStep = 10;
    const fAmpltude = 200.0;
    const fFrequency = 1.5;
    for (let i = 0; i < 1000; i += iStep) {
        lineData.append(i, Math.sin((fFrequency * (i - 100) * Math.PI) / 180.0) * fAmpltude);
    }
    lineSeries.dataSeries = lineData;
};
setXAxis1();
setXAxis2();
setYAxis1();
setYAxis2();
setSeries1();
setSeries2();

This results in the following output:

Multiple X-Axis and Y-Axis in JavaScript Charts with series scaling independently

Above: the red series is attached to the red pair of axis (Left, Bottom), and the purple series is attached to the purple set of axis (Right, Top).

By setting the BaseRenderableSeries.xAxisId and BaseRenderableSeries.yAxisId properties we have attached the series to an axis. These can be scaled independently of one another: both series have different amplitudes but are now scaled to fit the viewport.