iOS Charting Documentation - SciChart
Axis Styling - Styling the Axis Title and Labels

Every aspect of the Axis can be styled, including Major and Minor Gridlines, Tick Lines, Axis Labels and Axis title.

The Axis is responsible for drawing the following parts on the chart:

These are highlighted on the image below:

Styling the elements of the Axis

Styling the elements of the Axis

It is important to note a YAxis is responsible for drawing horizontal gridlines as well as bands between gridlines.

We are going to show how to style the label and title elements in the code sample below.

Styling Axis Labels

SCIFontStyle object can be applied to axis labels via the Axis.style.labelstyle property. Labels styles include Font Color, Font Name, Font Size, Transform (e.g. label rotation) and alignment.

Labels can be turned on or off using the drawLabels property on the Axis.Style

 

// Generate the FontStyle
SCITextFormattingStyle * fontStyle = [[SCITextFormattingStyle alloc]init];
fontStyle.color = UIColor.greenColor;
fontStyle.fontName = @"Helvetica";
fontStyle.fontSize = 14;
fontStyle.transform = CGAffineTransformMakeRotation(0);
fontStyle.alignmentHorizontal = SCILabelAlignmentHorizontal_Left;
fontStyle.alignmentVertical = SCILabelAlignmentVertical_Center;

// Apply the FontStyle to the axis
SCINumericAxis * axis = [[SCINumericAxis alloc]init];
axis.style.labelStyle = fontStyle;
axis.style.drawLabels = YES;
// Generate the FontStyle
var fontStyle = SCITextFormattingStyle()
fontStyle.color = UIColor.green
fontStyle.fontName = "Helvetica"
fontStyle.fontSize = 14
fontStyle.transform = CGAffineTransform(rotationAngle: 0)
fontStyle.alignmentHorizontal = .left
fontStyle.alignmentVertical = .center

// Apply the FontStyle to the axis
var axis = SCINumericAxis()
axis.style.labelStyle = fontStyle
axis.style.drawLabels = true
var fontStyle = new SCIFontStyle();
fontStyle.Color = UIColor.Green;
fontStyle.FontName = "Helvetica";
fontStyle.FontSize = 14;
fontStyle.Transform = CGAffineTransform.MakeRotation(0);
fontStyle.AlignmentHorizontal = SCILabelAlignmentHorizontalMode.Left;
fontStyle.AlignmentVertical = SCILabelAlignmentVerticalMode.Center;

// Apply the FontStyle to the axis
var axis = new SCINumericAxis();
axis.Style.LabelStyle = fontStyle;
axis.Style.DrawLabels = true;

 

Styling Axis Title

As it was mentioned, the axis's title can be styled. But let's take a look at how to set the title text and set it some style: 

// Generate the FontStyle
SCITextFormattingStyle * fontStyle = [[SCITextFormattingStyle alloc]init];
fontStyle.color = UIColor.greenColor;
fontStyle.fontName = @"Helvetica";
fontStyle.fontSize = 14;
fontStyle.transform = CGAffineTransformMakeRotation(0);
fontStyle.alignmentHorizontal = SCILabelAlignmentHorizontal_Left;
fontStyle.alignmentVertical = SCILabelAlignmentVertical_Center;
   
// Applying the style
id<SCIAxis2DProtocol> axis = [[SCINumericAxis alloc] init];
[axis setAxisTitle:@"X-Axis"];
[axis.style setAxisTitleLabelStyle:fontStyle];
// Generate the FontStyle
var fontStyle = SCITextFormattingStyle()
fontStyle.color = UIColor.green
fontStyle.fontName = "Helvetica"
fontStyle.fontSize = 14
fontStyle.transform = CGAffineTransform(rotationAngle: 0)
fontStyle.alignmentHorizontal = .left
fontStyle.alignmentVertical = .center
       
// Applying the style
let xAxis = SCINumericAxis()
xAxis.axisTitle = "X-Axis"
xAxis.style.axisTitleLabelStyle = fontStyle
// Generate the FontStyle
var fontStyle = new SCITextFormattingStyle();
fontStyle.Color = UIColor.Green;
fontStyle.FontName = "Helvetica";
fontStyle.FontSize = 14;
fontStyle.Transform = new CGAffineTransform()
fontStyle.AlignmentHorizontal = SCILabelAlignmentHorizontalMode.Left;
fontStyle.AlignmentVertical = SCILabelAlignmentVerticalMode.Center;
var xAxis = new SCINumericAxis();
xAxis.AxisTitle = "X-Axis";
xAxis.Style.AxisTitleLabelStyle = fontStyle;

Positioning Axis Title

There are several options available for positioning the title inside the axis area: