The Numeric Axis
The NumericAxis is a Value axis and is suitable for X and Y Axis when the data on that axis is numeric (e.g. number in TypeScript). It is not suitable for non-numeric data types.
Learn more about the commonalities between axis here.
Create and Configure a NumericAxis
There are lots of options that can be passed to the constructor of a NumericAxis to configure it. Some of these are in the common AxisBase2D type.
To create and configure a NumericAxis, use the following code:
This results in the following output:
<div id="scichart-root" ></div>
body { margin: 0; }
#scichart-root { width: 100%; height: 100vh; }
async function chartWithNumericAxis(divElementId) {
// #region ExampleA
// Demonstrates how to configure a numeric axis in SciChart.js
const {
SciChartSurface,
NumericAxis,
SciChartJsNavyTheme,
EAutoRange,
EAxisAlignment,
ENumericFormat,
} = SciChart;
// or, for npm, import { SciChartSurface, ... } from "scichart"
const { wasmContext, sciChartSurface } = await SciChartSurface.create(divElementId, {
theme: new SciChartJsNavyTheme()
});
// Create an XAxis on the bottom
const xAxis = new NumericAxis(wasmContext, {
// All these properties are optional
// ...
// Enable flags like drawing gridlines
drawMajorGridLines: true,
drawMinorGridLines: true,
drawLabels: true,
// Set multiline title
axisTitle: ["X Axis, Bottom", "2 decimal places"],
// Set the alignment and autoRange
axisAlignment: EAxisAlignment.Bottom,
autoRange: EAutoRange.Once,
// Enable decision labels with 4 significant figures
labelFormat: ENumericFormat.Decimal,
cursorLabelFormat: ENumericFormat.Decimal,
labelPrecision: 4,
});
// 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, Left, 4 dp",
axisAlignment: EAxisAlignment.Left,
labelFormat: ENumericFormat.Decimal,
cursorLabelFormat: ENumericFormat.Decimal,
labelPrecision: 4,
labelPrefix: "$",
labelPostfix: " USD"
}));
// #endregion
// For the example - but not the documentation - show a line series
const { FastLineRenderableSeries, XyDataSeries } = SciChart;
sciChartSurface.renderableSeries.add(new FastLineRenderableSeries(wasmContext, {
dataSeries: new XyDataSeries(wasmContext, {
xValues: [0, 1, 2, 3, 4, 5, 6, 7, 8],
yValues: [2.5, 3.5, 3.7, 4.0, 5.0, 5.5, 5.0, 4.0, 3.0]
}),
stroke: "#0066FF",
strokeThickness: 3,
}));
};
chartWithNumericAxis("scichart-root");
async function builderExample(divElementId) {
// #region ExampleB
// Demonstrates how to configure a numeric axis in SciChart.js using the Builder API
const {
chartBuilder,
ESeriesType,
EThemeProviderType,
EAutoRange,
EAxisAlignment,
ENumericFormat,
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: {
// All these properties are optional
// ...
// Enable flags like drawing gridlines
drawMajorGridLines: true,
drawMinorGridLines: true,
drawLabels: true,
// Set title, alignment and autorange
axisTitle: "X Axis, Bottom, 2 decimal places",
axisAlignment: EAxisAlignment.Bottom,
autoRange: EAutoRange.Once,
// Enable decision labels with 4 significant figures
labelFormat: ENumericFormat.Decimal,
cursorLabelFormat: ENumericFormat.Decimal,
labelPrecision: 2,
}
},
yAxes: {
type: EAxisType.NumericAxis,
options: {
axisTitle: "Y Axis, Left, default formatting",
axisAlignment: EAxisAlignment.Left,
axisTitle: "Y Axis, Left, 4 dp",
axisAlignment: EAxisAlignment.Left,
labelFormat: ENumericFormat.Decimal,
cursorLabelFormat: ENumericFormat.Decimal,
labelPrecision: 4,
labelPrefix: "$",
labelPostfix: " USD"
}
},
series: [
{
type: ESeriesType.LineSeries,
xyData: {
xValues: [0, 1, 2, 3, 4, 5, 6, 7, 8],
yValues: [2.5, 3.5, 3.7, 4.0, 5.0, 5.5, 5.0, 4.0, 3.0]
},
options: {
stroke: "#0066FF",
strokeThickness: 5,
}
}
]
});
// #endregion
};
// Uncomment this to use the builder example
//builderExample("scichart-root");
Label Formatting with ENumericFormat enum
You'll notice in the code sample above labels are formatted by passing in ENumericFormat to the constructor options of the axis. What's actually happening here is parameters are being passed to the AxisCore.labelProvider.
NumericAxis is quite versatile, it can format decimals with label prefix and postfix to any number of decimal places or significant figures. It can even format numbers as dates (assuming number is a unix stamp). You can find out all the options of the ENumericFormat enum below, or on our TypeDoc.
| ENumericFormat |
Copy Code
|
|---|---|
// import {ENumericFormat} from "scichart/types/NumericFormat"; export declare enum ENumericFormat { /** No format, return the string representation unchanged */ NoFormat = "NoFormat", /** Format to a specified number of decimal places */ Decimal = "Decimal", /** Format to a specified number of significant figures */ SignificantFigures = "SignificantFigures", /** Format as a date in format DD/MM/YYYY */ Date_DDMMYYYY = "Date_DDMMYYYY", /** Format as a date in format DD/MM/YY */ Date_DDMMYY = "Date_DDMMYY", /** Format as a date in format DD/MM HH:MM */ Date_DDMMHHMM = "Date_DDMMHHMM", /** Format as a date in format DD/MM */ Date_DDMM = "Date_DDMM", /** Format as a date in format HH:MM */ Date_HHMM = "Date_HHMM", /** * Format using Exponential notation to a specified number of significant figures eg 1.0E0, 1.5E1, 2.7E2 * Note that this will ALWAYS be base 10, even when used on a Logarithmic axis */ Exponential = "Exponential", /** * Format using Scientific notation to a specified number of significant figures eg 1.0x10^1, 1.5x10^2, 2.7x10^3 * On a Logarithmic axis, the base will be the same as the axis logarithmic base */ Scientific = "Scientific" } |
|
Further enhancement of the NumericAxis labels including custom formatting, string formatting or dynamic formatting can be achieved with the LabelProvider API.