SciChart.js JavaScript 2D Charts API > Axis APIs > Axis Types in SciChart.js
Axis Types in SciChart.js

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:

See Also