Inner Axis Layout
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:
Now the x axis is an inner axis, while the y axis is the default outer axis.
<div id="scichart-root" ></div>
body { margin: 0; }
#scichart-root { width: 100%; height: 100vh; }
async function innerAxis(divElementId) {
// Demonstrates how to configure an inner axis in SciChart.js
const {
SciChartSurface,
NumericAxis,
SciChartJsNavyTheme,
} = SciChart;
// or, for npm, import { SciChartSurface, ... } from "scichart"
const { wasmContext, sciChartSurface } = await SciChartSurface.create(divElementId, {
theme: new SciChartJsNavyTheme(),
});
// #region ExampleA
// Configure an axis to display inside the chart
const xAxis = new NumericAxis(wasmContext, {
isInnerAxis: true,
axisTitle: "Inner axis",
// To allow easier visualisation of axis position
backgroundColor: "#50C7E022",
});
// Add the xAxis to the chart
sciChartSurface.xAxes.add(xAxis);
// #endregion
// Creating a NumericAxis as a YAxis on the left
sciChartSurface.yAxes.add(new NumericAxis(wasmContext, {
axisTitle: "Outer axis",
// To allow easier visualisation of axis position
backgroundColor: "#F4842022",
}));
// Add annotations to the viewport to show the bounds of the viewport
const { BoxAnnotation, TextAnnotation, ECoordinateMode, EHorizontalAnchorPoint } = SciChart;
sciChartSurface.annotations.add(new BoxAnnotation({
x1: 0, x2: 1,
y1: 0, y2: 1,
fill: "#FF333311",
stroke: "#FF333355",
strokeThickness: 5,
xCoordinateMode: ECoordinateMode.Relative,
yCoordinateMode: ECoordinateMode.Relative,
}));
sciChartSurface.annotations.add(new TextAnnotation({
x1: 0.5, y1: 0.5,
yCoordShift: -50,
text: "Bounds of the Viewport",
textColor: "#FF3333",
fontSize: 26,
opacity: 0.4,
xCoordinateMode: ECoordinateMode.Relative,
yCoordinateMode: ECoordinateMode.Relative,
horizontalAnchorPoint: EHorizontalAnchorPoint.Center
}));
};
innerAxis("scichart-root");
async function builderExample(divElementId) {
// #region ExampleB
// Demonstrates how to configure an inner axis in SciChart.js using the Builder API
const {
chartBuilder,
EThemeProviderType,
EAxisType,
} = SciChart;
// or, for npm, import { chartBuilder, ... } from "scichart"
const { wasmContext, sciChartSurface } = await chartBuilder.build2DChart(divElementId, {
surface: { theme: { type: EThemeProviderType.Dark } },
xAxes: {
type: EAxisType.NumericAxis,
options: {
isInnerAxis: true,
axisTitle: "Inner axis",
// To allow easier visualisation of axis position
backgroundColor: "#50C7E022",
}
},
yAxes: {
type: EAxisType.NumericAxis,
options: {
axisTitle: "Outer axis",
// To allow easier visualisation of axis position
backgroundColor: "#F4842022",
}
},
});
// #endregion
};
// Uncomment this to use the builder example
//builderExample("scichart-root");
DrawSeriesBehindAxis property
SciChart.js also allows you to draw all chart series behind axis by setting a single flag on the parent SciChartSurface.
The default behaviour is to draw axis on the outside of the chart area. If you need more space on the chart (if axis are taking up too much space), you can set a single flag to draw the series behind the axis and pull the axis areas inside the chart area:
This results in the following output.
<div id="scichart-root" ></div>
body { margin: 0; }
#scichart-root { width: 100%; height: 100vh; }
async function seriesBehindAxis(divElementId) {
// Demonstrates how to configure an inner axis in SciChart.js
const {
SciChartSurface,
NumericAxis,
SciChartJsNavyTheme,
BoxAnnotation,
TextAnnotation,
ECoordinateMode,
EHorizontalAnchorPoint,
FastLineRenderableSeries,
XyDataSeries
} = SciChart;
// or, for npm, import { SciChartSurface, ... } from "scichart"
const { wasmContext, sciChartSurface } = await SciChartSurface.create(divElementId, {
theme: new SciChartJsNavyTheme(),
});
// #region ExampleA
sciChartSurface.drawSeriesBehindAxis = true;
// #endregion
const xAxis = new NumericAxis(wasmContext, {
axisTitle: "X Axis",
// To allow easier visualisation of axis position
backgroundColor: "#50C7E022",
});
// Add the xAxis to the chart
sciChartSurface.xAxes.add(xAxis);
// Creating a NumericAxis as a YAxis on the left
sciChartSurface.yAxes.add(new NumericAxis(wasmContext, {
axisTitle: "Y Axis",
// To allow easier visualisation of axis position
backgroundColor: "#F4842022",
}));
// Add annotations to the viewport to show the bounds of the viewport
sciChartSurface.annotations.add(new BoxAnnotation({
x1: 0.002, x2: 0.998,
y1: 0, y2: 0.998,
fill: "#FF333311",
stroke: "#FF333399",
strokeThickness: 5,
xCoordinateMode: ECoordinateMode.Relative,
yCoordinateMode: ECoordinateMode.Relative,
}));
sciChartSurface.annotations.add(new TextAnnotation({
x1: 0.5, y1: 0.5,
yCoordShift: -50,
text: "Bounds of the Viewport",
textColor: "#FF3333",
fontSize: 26,
opacity: 0.4,
xCoordinateMode: ECoordinateMode.Relative,
yCoordinateMode: ECoordinateMode.Relative,
horizontalAnchorPoint: EHorizontalAnchorPoint.Center
}));
// Show how a line series responds to drawSeriesBegindAxis
const xValues = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19];
const yValues = xValues.map(x => Math.sin(x * 0.4));
sciChartSurface.renderableSeries.add(new FastLineRenderableSeries(wasmContext, {
dataSeries: new XyDataSeries(wasmContext, {
xValues,
yValues
}),
stroke: "#0066FF",
strokeThickness: 3,
}));
};
seriesBehindAxis("scichart-root");
See Also