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.
TKChartNumericAxis
to present numeric values.TKChartLogarithmicAxis
to represent numeric values by using logarithmic scale.TKChartDateTimeAxis
to present date/time values.TKChartDateTimeCategoryAxis
to present discontinuous date/time values.TKChartCategoryAxis
to present categoric values.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.
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.
There are several important properties which allow customization of the behavior and appearance of each axis:
style
- contains a set of properties which define the visual style of an axis and its labels.position
- defines where the axis is positioned in relation to the plot area.plotMode
- defines how the associated series is rendered in relation to the axis.allowZoom
- allows zooming by this axis.zoom
- determines the zoom level for this axis.allowPan
- allows panning by this axis.pan
- determines the pan level for this axis.title
- defines the axis title. Note that it sets internally the attributedTitle
property.attributedTitle
- defines the axis attributedTitle, which allows text formatting.labelFormat
- defines a format string for axis labels.labelFormatter
- defines a label formatter for axis labels.tickCount
- returns the count of axis labels.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);
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);
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;
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;
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 ();
Any Cartesian series supports the following axes:
@warning Note that Pie series does not support axes.