Chart Axes: Overview

TKChart renders its points in a coordinate system defined by its axes. To do this, axes specify the minimum and maximum values that can be presented on the plot area. There are a few different types of axes that can be used with TKChart. They include: numeric, date/time and categoric. You can assign each axis to different series and you can show multiple axes in chart. Axes contain various properties to control their position, style and behavior. All chart axes subclass from TKChartAxis.

This article discusses the common characteristics of the abstract class TKChartAxis, which is the class all TKChart axes derive from. The axes automatically calculate its maximum and minimum properties, based on the incoming data.

Adding axes in TKChart

By default TKChart creates its axes automatically based on the provided data. The axes can be accessed by using the xAxis and yAxis properties of TKChartSeries. Use those properties to customize your axes appearance.

_chart.xAxis.style.labelStyle.font = [UIFont systemFontOfSize:18];
chart.xAxis!.style.labelStyle.font = UIFont.systemFont(ofSize: 18)
chart.XAxis.Style.LabelStyle.Font = UIFont.SystemFontOfSize (18);

TKChart creates the following axes based on your data:

Sometimes, it is necessary to set the axes explicitly. For example, you might want to change the axis kind or to set a custom range. In this scenario you can set the xAxis and yAxis properties directly when creating your series:

TKChartCategoryAxis *xAxis = [[TKChartCategoryAxis alloc] initWithCategories:categories];
xAxis.position = TKChartAxisPositionBottom;
xAxis.plotMode = TKChartAxisPlotModeBetweenTicks;
xAxis.range = [TKRange rangeWithMinimumIndex:0 andMaximumIndex:3];
_chart.xAxis = xAxis;
let xAxis = TKChartCategoryAxis(categories:categories)
xAxis.position = TKChartAxisPosition.bottom
xAxis.setPlotMode(TKChartAxisPlotMode.betweenTicks)
xAxis.range = TKRange(minimumIndex: 0, andMaximumIndex: 3)
chart.xAxis = xAxis
TKChartCategoryAxis xAxis = new TKChartCategoryAxis ();
xAxis.Position = TKChartAxisPosition.Bottom;
xAxis.PlotMode = TKChartAxisPlotMode.BetweenTicks;
series.XAxis = xAxis;

The axes property in TKChart can be used to iterate through all axes in chart.

Axes Common Properties

There are several important properties which allow customization of the behavior and appearance of each axis:

Configure Axes Position

You can change the axis position by setting its position property to one of the following values:
TKChartAxisPositionLeft, TKChartAxisPositionRight, TKChartAxisPositionTop and TKChartAxisPositionBottom.

The following lines of code demonstrate how you can create multiple axes at different positions:

TKChartDateTimeAxis *periodXAxis = [[TKChartDateTimeAxis alloc] init];
periodXAxis.majorTickIntervalUnit = TKChartDateTimeAxisIntervalUnitYears;
periodXAxis.minorTickIntervalUnit = TKChartDateTimeAxisIntervalUnitYears;
periodXAxis.majorTickInterval = 1;
periodXAxis.position = TKChartAxisPositionBottom;
periodXAxis.plotMode = TKChartAxisPlotModeBetweenTicks;
[_chart addAxis:periodXAxis];

TKChartNumericAxis *gdpInvestmentYAxis = [[TKChartNumericAxis alloc] initWithMinimum:@0 andMaximum:@20];
gdpInvestmentYAxis.majorTickInterval = @5;
gdpInvestmentYAxis.position = TKChartAxisPositionRight;
gdpInvestmentYAxis.style.labelStyle.textAlignment = TKChartAxisLabelAlignmentLeft;
gdpInvestmentYAxis.style.majorTickStyle.ticksHidden = NO;
gdpInvestmentYAxis.style.lineHidden = NO;
[_chart addAxis:gdpInvestmentYAxis];
let periodXAxis = TKChartDateTimeAxis()
periodXAxis.majorTickIntervalUnit = TKChartDateTimeAxisIntervalUnit.years
periodXAxis.minorTickIntervalUnit = TKChartDateTimeAxisIntervalUnit.years
periodXAxis.majorTickInterval = 1
periodXAxis.position = TKChartAxisPosition.bottom
periodXAxis.setPlotMode(TKChartAxisPlotMode.betweenTicks)
chart.add(periodXAxis)

let gdpInvestmentYAxis = TKChartNumericAxis(minimum: 0, andMaximum: 20)
gdpInvestmentYAxis.majorTickInterval = 5
gdpInvestmentYAxis.position = TKChartAxisPosition.right
gdpInvestmentYAxis.style.labelStyle.textAlignment = TKChartAxisLabelAlignment.left
gdpInvestmentYAxis.style.majorTickStyle.ticksHidden = false
gdpInvestmentYAxis.style.lineHidden = false
chart.add(gdpInvestmentYAxis)
TKChartDateTimeAxis periodXAxis = new TKChartDateTimeAxis ();
periodXAxis.MajorTickIntervalUnit = TKChartDateTimeAxisIntervalUnit.Years;
periodXAxis.MinorTickIntervalUnit = TKChartDateTimeAxisIntervalUnit.Years;
periodXAxis.MajorTickInterval = 1;
periodXAxis.Position = TKChartAxisPosition.Bottom;
periodXAxis.PlotMode = TKChartAxisPlotMode.BetweenTicks;
chart.AddAxis (periodXAxis);

TKChartNumericAxis gdpInvestmentYAxis = new TKChartNumericAxis (new NSNumber(0), new NSNumber(20));
gdpInvestmentYAxis.MajorTickInterval = 5;
gdpInvestmentYAxis.Position = TKChartAxisPosition.Right;
gdpInvestmentYAxis.Style.LabelStyle.TextAlignment = TKChartAxisLabelAlignment.Left;
gdpInvestmentYAxis.Style.MajorTickStyle.TicksHidden = false;
gdpInvestmentYAxis.Style.LineHidden = false;
chart.AddAxis (gdpInvestmentYAxis);

Configure Axes Appearance

You can customize any feature of the axis appearance. If you want to hide its line or change its line stroke or background, you can use the following peace of code:

_chart.xAxis.style.lineStroke = [TKStroke strokeWithColor:[UIColor blackColor]];
yAxis.style.lineStroke = TKStroke(color:UIColor(white:0.85, alpha:1.0), width:2)
chart.XAxis.Style.LineStroke = new TKStroke (UIColor.Black);

Configure Axes Ticks Appearance

In numeric/date-time axes you can specify the interval between axis ticks by setting the majorTickInterval and minorTickInterval properties:

xAxis.majorTickInterval = @1;
xAxis.minorTickInterval = @1;
xAxis.majorTickInterval = 1
xAxis.minorTickInterval = 1
xAxis.MajorTickInterval = 1;
xAxis.MinorTickInterval = 1;

You can customize the major and minor ticks of axis by manipulating the majorTickStyle and minorTickStyle properties.

xAxis.style.majorTickStyle.ticksOffset = -3;
xAxis.style.majorTickStyle.ticksHidden = NO;
xAxis.style.majorTickStyle.ticksWidth = 1.5;
xAxis.style.majorTickStyle.ticksFill = [TKSolidFill solidFillWithColor:[UIColor colorWithRed:203/255.0 green:203/255.0 blue:203/255.0 alpha:1.0]];
xAxis.style.majorTickStyle.ticksOffset = -3
xAxis.style.majorTickStyle.ticksHidden = false
xAxis.style.majorTickStyle.ticksWidth = 1.5
xAxis.style.majorTickStyle.ticksFill = TKSolidFill(color: UIColor(red: 203/255.0, green: 203/255.0, blue: 203/255.0, alpha: 1.0))
xAxis.style.majorTickStyle.maxTickClippingMode = TKChartAxisClippingMode.visible
xAxis.Style.MajorTickStyle.TicksOffset = -3;
xAxis.Style.MajorTickStyle.TicksHidden = false;
xAxis.Style.MajorTickStyle.TicksWidth = 1.5f;
xAxis.Style.MajorTickStyle.TicksFill = new TKSolidFill (new UIColor (203 / 255.0f, 203 / 255.0f, 203 / 255.0f, 1f));
xAxis.Style.MajorTickStyle.MaxTickClippingMode = TKChartAxisClippingMode.Visible;

In addition to the common tick style customizations, you can specify the first and last ticks visibility by setting minTickClippingMode and maxTickClippingMode properties:

series.yAxis.style.majorTickStyle.maxTickClippingMode = TKChartAxisClippingModeVisible;
series.yAxis.style.majorTickStyle.minTickClippingMode = TKChartAxisClippingModeVisible;
series.yAxis!.style.majorTickStyle.maxTickClippingMode = TKChartAxisClippingMode.visible
series.yAxis!.style.majorTickStyle.minTickClippingMode = TKChartAxisClippingMode.visible
series.YAxis.Style.MajorTickStyle.MaxTickClippingMode = TKChartAxisClippingMode.Visible;
series.YAxis.Style.MajorTickStyle.MinTickClippingMode = TKChartAxisClippingMode.Visible;

Configure Axes Label Appearance

You can configure the axis label appearance by manipulating the labelStyle property of the axis style object. If you want to change the font, text color, shadow color and offset, you should modify the corresponding properties:

_chart.yAxis.style.labelStyle.font = [UIFont systemFontOfSize:18];
_chart.yAxis.style.labelStyle.textColor = [UIColor blackColor];
chart.yAxis!.style.labelStyle.font = UIFont.systemFont(ofSize: 18)
chart.yAxis!.style.labelStyle.textColor = UIColor.black
chart.YAxis.Style.LabelStyle.Font = UIFont.SystemFontOfSize (18);
chart.YAxis.Style.LabelStyle.TextColor = UIColor.Black;

You can define the label offset and alignment by setting the textOffset and textAlignment properties:

yAxis.style.labelStyle.textAlignment = TKChartAxisLabelAlignmentRight | TKChartAxisLabelAlignmentBottom;
yAxis.style.labelStyle.firstLabelTextAlignment = TKChartAxisLabelAlignmentRight | TKChartAxisLabelAlignmentTop;
yAxis.style.labelStyle.textOffset = UIOffsetMake(0, 0);
yAxis.style.labelStyle.firstLabelTextOffset = UIOffsetMake(0, 0);
yAxis.style.labelStyle.textAlignment = TKChartAxisLabelAlignment(rawValue:TKChartAxisLabelAlignment.right.rawValue | TKChartAxisLabelAlignment.bottom.rawValue)
yAxis.style.labelStyle.firstLabelTextAlignment = TKChartAxisLabelAlignment(rawValue:TKChartAxisLabelAlignment.right.rawValue | TKChartAxisLabelAlignment.top.rawValue)
yAxis.style.labelStyle.textOffset = UIOffsetMake(0, 0)
yAxis.style.labelStyle.firstLabelTextOffset = UIOffsetMake(0, 0)
yAxis.Style.LabelStyle.TextAlignment = TKChartAxisLabelAlignment.Right | TKChartAxisLabelAlignment.Bottom;
yAxis.Style.LabelStyle.FirstLabelTextAlignment = TKChartAxisLabelAlignment.Right | TKChartAxisLabelAlignment.Top;
yAxis.Style.LabelStyle.TextOffset = new UIOffset (0, 0);
yAxis.Style.LabelStyle.FirstLabelTextOffset = new UIOffset (0, 0);

You can change the label fitting mode in the following manner:

yAxis.style.labelStyle.fitMode = TKChartAxisLabelFitModeRotate;
yAxis.style.labelStyle.fitMode = TKChartAxisLabelFitMode.rotate
yAxis.Style.LabelStyle.FitMode = TKChartAxisLabelFitMode.Rotate;

Configure Axes Title Appearance

In order to change the change the axis title font, text color, shadow color, alignment and offset, you should modify the corresponding properties:

xAxis.title = @"Vendors";
xAxis.style.titleStyle.textColor = [UIColor grayColor];
xAxis.style.titleStyle.font = [UIFont boldSystemFontOfSize:11];
xAxis.style.titleStyle.alignment = TKChartAxisTitleAlignmentRightOrBottom;
chart.xAxis!.title = "Vendors"
chart.xAxis!.style.titleStyle.textColor = UIColor.gray
chart.xAxis!.style.titleStyle.font = UIFont.boldSystemFont(ofSize: 11)
chart.xAxis!.style.titleStyle.alignment = TKChartAxisTitleAlignment.rightOrBottom
chart.reloadData()
xAxis.Title = "Vendors";
xAxis.Style.TitleStyle.TextColor = UIColor.Gray;
xAxis.Style.TitleStyle.Font = UIFont.BoldSystemFontOfSize (11);
xAxis.Style.TitleStyle.Alignment = TKChartAxisTitleAlignment.RightOrBottom;
chart.ReloadData ();

Axes Types

Any Cartesian series supports the following axes:

@warning Note that Pie series does not support axes.