SciChart.js JavaScript 2D Charts API > Styling and Theming > Axis Styling - Axis Borders
Axis Styling - Axis Borders

In SciChart.js v1.3 and above, we have introduced a property to let you style the axis border. This is the line between the axis and the main SciChartSurface.

To achieve the following output, use this code.

Axis Border Styling
Copy Code
const yAxis = new NumericAxis(wasmContext);
yAxis.id = "RightAxis";
yAxis.axisTitle = "Right Axis";
yAxis.axisBorder = {
    borderLeft: 1,
    color: "#368BC1" // Blue color
};

const leftYAxis = new NumericAxis(wasmContext);
leftYAxis.axisAlignment = EAxisAlignment.Left;
leftYAxis.axisTitle = "Left Axis";
leftYAxis.axisBorder = {
    borderRight: 1,
    color: "#228B22", // Green color
};

const xAxis = new NumericAxis(wasmContext);
xAxis.axisBorder = {
    borderTop: 1,
    color: "#EEEEEE", // White color
};

Note: All colors in SciChart.js are strings, which are HTML color codes. Supported values are 6-digit hex codes e.g. "#ADFF2F", 8-digit hex codes in RGBA format where the last two digits are opacity e.g. "#AAFF2F33" and rgba CSS color codes e.g. "rgba(173, 255, 47, 0.3)"

The TBorderType

Axis Borders can be set on the Left, Right, Bottom or Top of the Axis. The thickness of the border can be set individually on each side of the axis.

For more information, see the AxisBase2D.axisBorder property, which is type TBorder.