There are several axis types in SciChart.js. Although they all differ in types of data values that can be rendered, the most fundamental difference is in their behavior. By that, the axes can be divided into two groups, Category and Value axis types. Please read the Value Axis vs. Category Axis article elaborating on what the difference is.
The axis types provided by SciChart Android are listed below:
| Axis Type | Value or Category Axis |
| NumericAxis | Value Axis / Numeric Types or Dates |
| CategoryAxis | Category Axis / Numeric Types or Dates |
All the axis types in SciChart inherit from AxisCore - a common type shared across both 2D and 3D Charts - and all 2D Axis inherit AxisBase2D.
NumericAxis
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.
To create and configure a NumericAxis, use the following code:
| NumericAxis |
Copy Code
|
|---|---|
import {NumericAxis} from "scichart/charting/Visuals/Axis/NumericAxis";
import {EAutoRange} from "scichart/types/AutoRange";
// Creating a NumericAxis as an XAxis on the bottom
const xAxis = new NumericAxis(wasmContext);
xAxis.drawMajorGridLines = true;
xAxis.drawMinorGridLines = true;
xAxis.axisTitle = "XAxis";
xAxis.axisAlignment = EAxisAlignment.Bottom;
xAxis.autoRange = EAutoRange.Once;
xAxis.labelProvider.formatLabel = (dataValue: number) => dataValue.toFixed(3); // optional label formatting
sciChartSurface.xAxes.add(xAxis); // Add the axis to the chart
// Creating a NumericAxis as an YAxis on the Left
const yAxis = new NumericAxis(wasmContext);
yAxis.drawMajorGridLines = true;
yAxis.drawMinorGridLines = true;
yAxis.axisTitle = "YAxis";
yAxis.axisAlignment = EAxisAlignment.Left;
yAxis.autoRange = EAutoRange.Once;
yAxis.labelProvider.formatLabel = (dataValue: number) => dataValue.toFixed(3); // optional override label formatting
|
|
NumericAxis - with Dates
A NumericAxis can also be used to format dates. To do this, the data in your DataSeries must be a number in Unix date format, then the number may be formatted as date using the LabelProvider feature.
| NumericAxis |
Copy Code
|
|---|---|
import {NumericAxis} from "scichart/charting/Visuals/Axis/NumericAxis";
import {ENumericFormat, NumericLabelProvider } from "./LabelProvider/NumericLabelProvider";
// Creating a NumericAxis as an XAxis with custom date formatting
const xAxis = new NumericAxis(wasmContext);
xAxis.labelProvider = new NumericLabelProvider(ENumericFormat.Date_DDMMYYYY); // optional override label formatting
// Or... explicit control over date formatting assuming X-values are unix timestamps
xAxis.labelProvider.formatLabel = (unixTimestamp : number) => {
return new Date(unixTimestamp * 1000).toLocaleDateString("en-GB", {
month: "numeric",
year: "numeric",
day: "numeric"
});
};
|
|
CategoryAxis
The CategoryAxis is a Category axis and is suitable for the XAxis only. It is designed to handle a special case when data is discontinuous or contains breaks at regular intervals. Unlike the other axis types, it works with with data indexes, not actual data values. It is not suitable for YAxis.
To create and configure a CategoryAxis, use the following code:
| CategoryAxis |
Copy Code
|
|---|---|
import {CategoryAxis} from "scichart/charting/Visuals/Axis/CategoryAxis";
import {EAutoRange} from "scichart/types/AutoRange";
import {ENumericFormat, NumericLabelProvider } from "./LabelProvider/NumericLabelProvider";
// Creating a CategoryAxisas an XAxis on the bottom
const xAxis = new CategoryAxis(wasmContext);
xAxis.drawMajorGridLines = true;
xAxis.drawMinorGridLines = true;
xAxis.axisTitle = "XAxis";
xAxis.axisAlignment = EAxisAlignment.Bottom;
xAxis.autoRange = EAutoRange.Once;
xAxis.labelProvider = new NumericLabelProvider(ENumericFormat.Date_DDMMYYYY); // optional override label formatting
|
|
See the Axis Types in action
Please take a look at the examples from the SciChart.js Examples Suite listed below to see these axis types in action: