SciChart.js JavaScript 2D Charts API > Subcharts API > SubCharts Positioning
SubCharts Positioning

There are several modes that can be used to position a sub-surface, they are defined in the ECoordinateMode enum.

By default, sub-surfaces use ECoordinateMode.Relative for positioning. To change the coordinate mode use I2DSubSurfaceOptions.coordinateMode or SciChartSubSurface.coordinateMode property.

Note ECoordinateMode.DataValue require axes to be present on the main surface and that they are specified as parent axes of the sub-surface.

So we can update our basic example as following:

import { ECoordinateMode } from 'scichart/Charting/Visuals/Annotations/AnnotationBase';
// ...
const subChartSurface = sciChartSurface.addSubChart({
    coordinateMode: ECoordinateMode.DataValue,
    position: new Rect(0, 5, 4, 3),
});
import { ECoordinateMode } from 'scichart/Charting/Visuals/Annotations/AnnotationBase';
// ...
const { wasmContext, sciChartSurface } = await chartBuilder.build2DChart(divElementId, {
    // ...
    subCharts: [
        {
            surface: {
                // ...
                coordinateMode: ECoordinateMode.DataValue,
                position: new Rect(0, 5, 4, 3),
            },
        },
    ],
});

This places a chart-within-a-chart at a specific DataValue.

Next let's look at the case where we have a custom axis id or multiple axes on main surface.

Since positioning with ECoordinateMode.DataValue depends on the axis visible ranges, we will have to specify which axes should be used for sub-surface position calculation.

To do this we can pass I2DSubSurfaceOptions.parentXAxisId / I2DSubSurfaceOptions.parentYAxisId via options or use SciChartSubSurface.parentXAxisId / SciChartSubSurface.parentYAxisId properties.

import { NumberRange } from 'scichart/Core/NumberRange';
// ...
const { sciChartSurface, wasmContext } = await SciChartSurface.create(divElementId);
// define multiple X and Y Axes
const mainSurfaceXAxis1 = new NumericAxis(wasmContext, {
    id: 'mainSurfaceXAxis1',
    axisTitle: 'X Axis 1',
    visibleRange: new NumberRange(0, 10),
});
const mainSurfaceXAxis2 = new NumericAxis(wasmContext, {
    id: 'mainSurfaceXAxis2',
    axisTitle: 'X Axis 2',
    visibleRange: new NumberRange(-5, 5),
});
const mainSurfaceYAxis1 = new NumericAxis(wasmContext, {
    id: 'mainSurfaceYAxis1',
    axisTitle: 'Y Axis 1',
    visibleRange: new NumberRange(0, 10),
});
const mainSurfaceYAxis2 = new NumericAxis(wasmContext, {
    id: 'mainSurfaceYAxis2',
    axisTitle: 'Y Axis 2',
    visibleRange: new NumberRange(-5, 5),
});
sciChartSurface.xAxes.add(mainSurfaceXAxis1, mainSurfaceXAxis2);
sciChartSurface.yAxes.add(mainSurfaceYAxis1, mainSurfaceYAxis2);
// create a sub-surface positioned accordingly to coordinates on mainSurfaceXAxis2 and mainSurfaceYAxis2
const subChartSurface = sciChartSurface.addSubChart({
    coordinateMode: ECoordinateMode.DataValue,
    parentXAxisId: mainSurfaceXAxis2.id,
    parentYAxisId: mainSurfaceYAxis2.id,
    position: new Rect(0, 5, 4, 3),
});
subChartSurface.xAxes.add(new NumericAxis(wasmContext));
subChartSurface.yAxes.add(new NumericAxis(wasmContext));
import { NumberRange } from 'scichart/Core/NumberRange';
// ...
const { wasmContext, sciChartSurface } = await chartBuilder.build2DChart(divElementId, {
    // define multiple X and Y Axes
    xAxes: [
        {
            type: EAxisType.NumericAxis,
            options: {
                id: 'mainSurfaceXAxis1',
                axisTitle: 'X Axis 1',
                visibleRange: new NumberRange(0, 10),
            }
        },
        {
            type: EAxisType.NumericAxis,
            options: {
                id: 'mainSurfaceXAxis2',
                axisTitle: 'X Axis 2',
                visibleRange: new NumberRange(-5, 5),
            }
        },
    ],
    yAxes: [
        {
            type: EAxisType.NumericAxis,
            options: {
                id: 'mainSurfaceYAxis1',
                axisTitle: 'Y Axis 1',
                visibleRange: new NumberRange(0, 10),
            }
        },
        {
            type: EAxisType.NumericAxis,
            options: {
                id: 'mainSurfaceYAxis2',
                axisTitle: 'Y Axis 2',
                visibleRange: new NumberRange(-5, 5),
            }
        },
    ],
    subCharts: [
        {
            // create a sub-surface positioned accordingly to coordinates on mainSurfaceXAxis2 and mainSurfaceYAxis2
            surface: {
                coordinateMode: ECoordinateMode.DataValue,
                parentXAxisId: 'mainSurfaceXAxis2',
                parentYAxisId: 'mainSurfaceYAxis2',
                position: new Rect(0, 5, 4, 3),
            },
        },
    ],
});

TODO IMAGE REQUIRED

Updating SubChart Position

SciChart allows to change a sub-surface position dynamically using the SciChartSubSurface.subPosition property.

Let's demonstrate this by updating the coordinate mode and subPosition of the sub-chart from previous section

// modify sub-chart position
subChartSurface.coordinateMode = ECoordinateMode.Pixel;
subChartSurface.subPosition = new Rect(100, 100, 200, 200);
// get the sub-chart surface from collection
const [subChartSurface] = sciChartSurface.subCharts;
// modify sub-chart position
subChartSurface.coordinateMode = ECoordinateMode.Pixel;
subChartSurface.subPosition = new Rect(100, 100, 200, 200);

This will move and resize the Sub Chart:

 

See Also