SciChart iOS v2.x API > Axis APIs > Axis Styling - Styling the Axis Title and Labels
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:

  • The Axis Labels including Font, Font Size, Color and Rotation angle
  • The Axis Ticks (small marks on the outside of an axis next to labels)
  • The Axis Gridlines (displayed across the centre of the chart)
  • The Axis Bands (shading between major gridlines)

These are highlighted on the image below:

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:

 

 

See Also