Central Axis Layout
Placing Axis in the center the chart, like an oscilloscope or spectrum analyzer is possible with SciChart.js.
To do this, use the CentralAxesLayoutManager applied to the SciChartSurface.LayoutManager property.
Here's a code sample:
This results in the following output:
<div id="scichart-root" ></div>
body { margin: 0; }
#scichart-root { width: 100%; height: 100vh; }
async function centralAxis(divElementId) {
// #region ExampleA
// Demonstrates how to configure a central axis in SciChart.js
const {
SciChartSurface,
NumericAxis,
SciChartJsNavyTheme,
CentralAxesLayoutManager
} = SciChart;
// or, for npm, import { SciChartSurface, ... } from "scichart"
const { wasmContext, sciChartSurface } = await SciChartSurface.create(divElementId, {
theme: new SciChartJsNavyTheme()
});
// Apply the CentralAxesLayoutManager to the SciChartSurface
sciChartSurface.layoutManager = new CentralAxesLayoutManager();
// Add an X, Y Axis
sciChartSurface.xAxes.add(new NumericAxis(wasmContext, {
// To allow easier visualisation of axis position
backgroundColor: "#50C7E022",
axisBorder: {
borderTop: 1,
color: "#50C7E0"
}
}));
sciChartSurface.yAxes.add(new NumericAxis(wasmContext, {
// To allow easier visualisation of axis position
backgroundColor: "#F4842022",
axisBorder: {
borderRight: 1,
color: "#F48420"
}
}));
// #endregion
};
centralAxis("scichart-root");
async function builderExample(divElementId) {
// #region ExampleB
// Demonstrates how to configure a central axis in SciChart.js using the Builder API
const {
chartBuilder,
EThemeProviderType,
EAxisType,
ELayoutManagerType
} = SciChart;
// or, for npm, import { chartBuilder, ... } from "scichart"
const { wasmContext, sciChartSurface } = await chartBuilder.build2DChart(divElementId, {
surface: {
theme: { type: EThemeProviderType.Dark },
layoutManager: { type: ELayoutManagerType.CentralAxes }
},
xAxes: {
type: EAxisType.NumericAxis,
options: {
// To allow easier visualisation of axis position
backgroundColor: "#50C7E022",
axisBorder: {
borderTop: 1,
color: "#50C7E0"
}
}
},
yAxes: {
type: EAxisType.NumericAxis,
options: {
// To allow easier visualisation of axis position
backgroundColor: "#F4842022",
axisBorder: {
borderRight: 1,
color: "#F48420"
}
}
},
});
// #endregion
};
// Uncomment this to use the builder example
//builderExample("scichart-root");
Configure the Position of Central Axis
CentralAxesLayoutManager has some options you can use to configure the position of the horizontal and vertical axes.
The following code places an YAxis inside the chart at X=3 and an XAxis inside the chart at Y=100 pixels.
Options available in the EInnerAxisPlacementCoordinateMode enum include: DataValue, Pixel, or Relative, which allows placement of an axis at a fraction of the viewport from 0..1.
This results in the following output:
<div id="scichart-root" ></div>
body { margin: 0; }
#scichart-root { width: 100%; height: 100vh; }
async function centralAxisConfigure(divElementId) {
// Demonstrates how to configure a central axis in SciChart.js
const {
SciChartSurface,
NumericAxis,
SciChartJsNavyTheme,
CentralAxesLayoutManager,
EInnerAxisPlacementCoordinateMode
} = SciChart;
// or, for npm, import { SciChartSurface, ... } from "scichart"
const { wasmContext, sciChartSurface } = await SciChartSurface.create(divElementId, {
theme: new SciChartJsNavyTheme()
});
// #region ExampleA
// Apply the CentralAxesLayoutManager to the SciChartSurface
sciChartSurface.layoutManager = new CentralAxesLayoutManager({
horizontalAxisPositionCoordinateMode: EInnerAxisPlacementCoordinateMode.DataValue,
verticalAxisPositionCoordinateMode: EInnerAxisPlacementCoordinateMode.Pixel,
horizontalAxisPosition: 3,
verticalAxisPosition: 100,
});
// Continue to add your X,Y axis as before
// #endregion
// Add an X, Y Axis
sciChartSurface.xAxes.add(new NumericAxis(wasmContext, {
// To allow easier visualisation of axis position
backgroundColor: "#50C7E022",
axisBorder: {
borderTop: 1,
color: "#50C7E0"
}
}));
sciChartSurface.yAxes.add(new NumericAxis(wasmContext, {
// To allow easier visualisation of axis position
backgroundColor: "#F4842022",
axisBorder: {
borderRight: 1,
color: "#F48420"
}
}));
};
centralAxisConfigure("scichart-root");
async function builderExample(divElementId) {
// Demonstrates how to configure a central axis in SciChart.js using the Builder API
const {
chartBuilder,
EThemeProviderType,
EAxisType,
ELayoutManagerType,
EInnerAxisPlacementCoordinateMode
} = SciChart;
// or, for npm, import { chartBuilder, ... } from "scichart"
// #region ExampleB
const { wasmContext, sciChartSurface } = await chartBuilder.build2DChart(divElementId, {
surface: {
theme: { type: EThemeProviderType.Dark },
layoutManager: {
type: ELayoutManagerType.CentralAxes, options: {
horizontalAxisPositionCoordinateMode: EInnerAxisPlacementCoordinateMode.DataValue,
verticalAxisPositionCoordinateMode: EInnerAxisPlacementCoordinateMode.Pixel,
horizontalAxisPosition: 3,
verticalAxisPosition: 100,
}
}
},
// etc...
// #endregion
xAxes: {
type: EAxisType.NumericAxis,
options: {
// To allow easier visualisation of axis position
backgroundColor: "#50C7E022",
axisBorder: {
borderTop: 1,
color: "#50C7E0"
}
}
},
yAxes: {
type: EAxisType.NumericAxis,
options: {
// To allow easier visualisation of axis position
backgroundColor: "#F4842022",
axisBorder: {
borderRight: 1,
color: "#F48420"
}
}
},
});
};
// Uncomment this to use the builder example
//builderExample("scichart-root");