iOS & macOS Charting Documentation - SciChart iOS & macOS Charts SDK v4.x

Axis Styling - Grid Lines, Ticks and Axis Bands

As mentioned in previous article on Axis Styling - Title and Labels - each and every aspect of the axis can be styled. The Axis is responsible for drawing the following parts:

Title
Axis Labels
Tick Lines - small marks on the outside of an axis next to labels
Grid Lines - major and minor
Axis Bands - shading between the major grid-lines

In this article we are going to focus on Tick Lines, Gridlines and Axis Bands styling. So let’s pick up where we left off in previous article and proceed with some styling.

NOTE: It’s important to mention, that X-Axis is responsible for vertical grid-lines and bands, whereas Y-Axis - for horizontal ones.

Title Positioning

NOTE: In SciChart, almost all styling methods expect an instance of either SCIPenStyle or SCIBrushStyle to be passed in. Those that deals with text styling, expect an instance of a SCIFontStyle. To learn more about how to utilize them, please refer to the SCIPenStyle, SCIBrushStyle and SCIFontStyle article.

Axis Ticks

Axis Ticks can be styled via applying the SCIPenStyle onto the ISCIAxisCore.minorTickLineStyle property to affect Minor ticks, or onto the ISCIAxisCore.majorTickLineStyle - for the Major ticks. Ticks Length can also be controlled via ISCIAxisCore.majorTickLineLength and ISCIAxisCore.minorTickLineLength properties.

Also, ticks can be completely hidden or shown on an axis via the ISCIAxisCore.drawMinorTicks and ISCIAxisCore.drawMajorTicks properties.

axis.minorTickLineStyle = [[SCISolidPenStyle alloc] initWithColorCode:0xFF279B27 thickness:2];
axis.majorTickLineStyle = [[SCISolidPenStyle alloc] initWithColorCode:0xFF279B27 thickness:4];

axis.minorTickLineStyle = SCISolidPenStyle(colorCode: 0xFF279B27, thickness: 2)
axis.majorTickLineStyle = SCISolidPenStyle(colorCode: 0xFF279B27, thickness: 4)

axis.MinorTickLineStyle = new SCISolidPenStyle(0xFF279B27, 2);
axis.MajorTickLineStyle = new SCISolidPenStyle(0xFF279B27, 4);

Grid Lines

Grid Lines are styled the same way as Axis ticks - use the following properties to affect gridlines rendering:

axis.minorGridLineStyle = [[SCISolidPenStyle alloc] initWithColorCode:0x33279B27 thickness:1];
axis.majorGridLineStyle = [[SCISolidPenStyle alloc] initWithColorCode:0xFF279B27 thickness:3 strokeDashArray:@[@5, @15] antiAliasing:YES];

axis.minorGridLineStyle = SCISolidPenStyle(colorCode: 0x33279B27, thickness: 1)
axis.majorGridLineStyle = SCISolidPenStyle(colorCode: 0xFF279B27, thickness: 3, strokeDashArray: [5, 15], antiAliasing: true)

axis.MinorGridLineStyle = new SCISolidPenStyle(0xFF279B27, 1);
axis.MajorGridLineStyle = new SCISolidPenStyle(0xFF279B27, 3, true, new float[] { 5f, 15f });

Axis Bands

The colored strips between Major grid lines are called Axis Bands. They can be made visible or hidden via the ISCIAxisCore.drawMajorBands property. The fill can be changed via the ISCIAxisCore.axisBandsStyle property, that expects a SCIBrushStyle:

axis.axisBandsStyle = [[SCISolidBrushStyle alloc] initWithColorCode:0x22279B27];

axis.axisBandsStyle = SCISolidBrushStyle(colorCode: 0x22279B27)

axis.AxisBandsStyle = new SCISolidBrushStyle(0x33279B27);