Chart: Grid Customization

TKChart series, which support axes, can render a grid that facilitates the process of determining the values of points afar from the axes. Since Pie area does not use axes, the grid is valid only in the context of Cartesian series. Grid consists of horizontal and vertical lines matching axes major ticks and fills between them. You can alternate fills to create zebra like effect both horizontally and vertically.

The essential properties of TKChartGridStyle are the following:

Customizing grid appearance

Working with grid style properties is easy. Here is a way to make colorful grid lines:

TKChartGridStyle* gridStyle = chart.gridStyle;
gridStyle.verticalLineStroke = [TKStroke strokeWithColor:[UIColor blackColor]];
gridStyle.verticalLineAlternateStroke = [TKStroke strokeWithColor:[UIColor blackColor]];
gridStyle.verticalLinesHidden = NO;
gridStyle.verticalFill = nil;
gridStyle.verticalAlternateFill = nil;

gridStyle.horizontalLineStroke = [TKStroke strokeWithColor:[UIColor redColor]];
gridStyle.horizontalLineAlternateStroke = [TKStroke strokeWithColor:[UIColor blueColor]];
gridStyle.horizontalFill = nil;
gridStyle.horizontalAlternateFill = nil;
gridStyle.horizontalLinesHidden = NO;
let gridStyle = chart.gridStyle
gridStyle.verticalLineStroke = TKStroke(color: UIColor.black)
gridStyle.verticalLineAlternateStroke = TKStroke(color: UIColor.black)
gridStyle.verticalLinesHidden = false
gridStyle.verticalFill = nil
gridStyle.verticalAlternateFill = nil

gridStyle.horizontalLineStroke = TKStroke(color: UIColor.red)
gridStyle.horizontalLineAlternateStroke = TKStroke(color: UIColor.blue)
gridStyle.horizontalFill = nil
gridStyle.horizontalAlternateFill = nil
gridStyle.horizontalLinesHidden = false
var gridStyle = chart.GridStyle;
gridStyle.VerticalLineStroke = new TKStroke (UIColor.Black);
gridStyle.VerticalLineAlternateStroke = new TKStroke (UIColor.Black);
gridStyle.VerticalLinesHidden = false;
gridStyle.VerticalFill = null;
gridStyle.VerticalAlternateFill = null; 

gridStyle.HorizontalLineStroke = new TKStroke (UIColor.Red);
gridStyle.HorizontalLineAlternateStroke =new  TKStroke (UIColor.Blue);
gridStyle.HorizontalFill = null;
gridStyle.HorizontalAlternateFill = null;
gridStyle.HorizontalLinesHidden = false;

You can remove vertical lines altogether:

TKChartGridStyle* gridStyle = chart.gridStyle;

gridStyle.verticalLinesHidden = YES;
gridStyle.verticalFill = nil;
gridStyle.verticalAlternateFill = nil;

gridStyle.horizontalLineStroke = [TKStroke strokeWithColor:[UIColor redColor]];
gridStyle.horizontalLineAlternateStroke = [TKStroke strokeWithColor:[UIColor blueColor]];
gridStyle.horizontalFill = nil;
gridStyle.horizontalAlternateFill = nil;
gridStyle.horizontalLinesHidden = NO;
let gridStyle = chart.gridStyle
gridStyle.verticalLinesHidden = true
gridStyle.verticalFill = nil
gridStyle.verticalAlternateFill = nil

gridStyle.horizontalLineStroke = TKStroke(color: UIColor.red)
gridStyle.horizontalLineAlternateStroke = TKStroke(color: UIColor.blue)
gridStyle.horizontalFill = nil
gridStyle.horizontalAlternateFill = nil
gridStyle.horizontalLinesHidden = false
var gridStyle = chart.GridStyle;

gridStyle.VerticalLinesHidden = true;
gridStyle.VerticalFill = null;
gridStyle.VerticalAlternateFill = null;  

gridStyle.HorizontalLineStroke = new TKStroke (UIColor.Red);
gridStyle.HorizontalLineAlternateStroke = new TKStroke (UIColor.Blue);
gridStyle.HorizontalFill = null;
gridStyle.HorizontalAlternateFill = null;
gridStyle.HorizontalLinesHidden = false;

Now add some style using alternative fills:

TKChartGridStyle* gridStyle = chart.gridStyle;

gridStyle.horizontalLineStroke = [TKStroke strokeWithColor:[UIColor colorWithWhite:215.f/255.f alpha:1.f]];
gridStyle.horizontalLineAlternateStroke = [TKStroke strokeWithColor:[UIColor colorWithWhite:215.f/255.f alpha:1.f]];
gridStyle.horizontalLinesHidden = NO;
gridStyle.horizontalFill = [TKSolidFill solidFillWithColor:[UIColor colorWithWhite:228.f/255.f alpha:1.f]];
gridStyle.horizontalAlternateFill = [TKSolidFill solidFillWithColor:[UIColor whiteColor]];

gridStyle.verticalFill = nil;
gridStyle.verticalAlternateFill = nil;
gridStyle.verticalLinesHidden = YES;
let gridStyle = chart.gridStyle
gridStyle.horizontalLineStroke = TKStroke(color: UIColor(white: 215.0 / 255.0, alpha: 1.0))
gridStyle.horizontalLineAlternateStroke = TKStroke(color: UIColor(white: 215.0 / 255.0, alpha: 1.0))
gridStyle.horizontalLinesHidden = false
gridStyle.horizontalFill = TKSolidFill(color: UIColor(white: 228.0 / 255.0, alpha: 1.0))
gridStyle.horizontalAlternateFill = TKSolidFill(color: UIColor.white)

gridStyle.verticalFill = nil
gridStyle.verticalAlternateFill = nil
gridStyle.verticalLinesHidden = true
var gridStyle = chart.GridStyle;

gridStyle.HorizontalLineStroke = new TKStroke (UIColor.FromWhiteAlpha(215.0f / 255.0f, 1.0f));
gridStyle.HorizontalLineAlternateStroke = new TKStroke (UIColor.FromWhiteAlpha (215.0f / 255.0f, 1.0f));
gridStyle.HorizontalLinesHidden = false;
gridStyle.HorizontalFill = new TKSolidFill (UIColor.FromWhiteAlpha (228.0f / 255.0f, 1.0f));
gridStyle.HorizontalAlternateFill = new TKSolidFill (UIColor.White);

gridStyle.VerticalFill = null;
gridStyle.VerticalAlternateFill = null;
gridStyle.VerticalLinesHidden = true;

Here is how to switching to alternative vertical fills:

TKChartGridStyle* gridStyle = chart.gridStyle;

gridStyle.verticalLineStroke = [TKStroke strokeWithColor:[UIColor colorWithWhite:215.f/255.f alpha:1.f]];
gridStyle.verticalLineAlternateStroke = [TKStroke strokeWithColor:[UIColor colorWithWhite:215.f/255.f alpha:1.f]];
gridStyle.verticalLinesHidden = NO;
gridStyle.verticalFill = [TKSolidFill solidFillWithColor:[UIColor colorWithWhite:228.f/255.f alpha:1.f]];
gridStyle.verticalAlternateFill = [TKSolidFill solidFillWithColor:[UIColor whiteColor]];

gridStyle.horizontalFill = nil;
gridStyle.horizontalAlternateFill = nil;
gridStyle.horizontalLinesHidden = YES;
let gridStyle = chart.gridStyle
gridStyle.verticalLineStroke = TKStroke(color: UIColor(white: 215.0 / 255.0, alpha: 1.0))
gridStyle.verticalLineAlternateStroke = TKStroke(color: UIColor(white: 215.0 / 255.0, alpha: 1.0))
gridStyle.verticalLinesHidden = false
gridStyle.verticalFill = TKSolidFill(color: UIColor(white: 228.0 / 255.0, alpha: 1.0))
gridStyle.verticalAlternateFill = TKSolidFill(color: UIColor.white)


gridStyle.horizontalFill = nil
gridStyle.horizontalAlternateFill = nil
gridStyle.horizontalLinesHidden = true
var gridStyle = chart.GridStyle;

gridStyle.VerticalLineStroke = new TKStroke (UIColor.FromWhiteAlpha (215.0f / 255.0f, 1.0f));
gridStyle.VerticalLineAlternateStroke = new TKStroke (UIColor.FromWhiteAlpha (215.0f / 255.0f, 1.0f));
gridStyle.VerticalLinesHidden = false;
gridStyle.VerticalFill = new TKSolidFill (UIColor.FromWhiteAlpha (228.0f / 255.0f, 1.0f));
gridStyle.VerticalAlternateFill = new TKSolidFill (UIColor.White);

gridStyle.HorizontalFill = null;
gridStyle.HorizontalAlternateFill = null;
gridStyle.HorizontalLinesHidden = true;

Combining it together

TKChartGridStyle* gridStyle = chart.gridStyle;

gridStyle.horizontalLineStroke = [TKStroke strokeWithColor:[UIColor colorWithWhite:215.f/255.f alpha:1.f]];
gridStyle.horizontalLineAlternateStroke = [TKStroke strokeWithColor:[UIColor colorWithWhite:215.f/255.f alpha:1.f]];
gridStyle.horizontalFill = [TKSolidFill solidFillWithColor:[UIColor colorWithWhite:228.f/255.f alpha:1.f]];
gridStyle.horizontalAlternateFill = [TKSolidFill solidFillWithColor:[UIColor whiteColor]];
gridStyle.horizontalLinesHidden = NO;

gridStyle.verticalLineStroke = [TKStroke strokeWithColor:[UIColor colorWithWhite:215.f/255.f alpha:1.f]];
gridStyle.verticalLineAlternateStroke = [TKStroke strokeWithColor:[UIColor colorWithWhite:215.f/255.f alpha:1.f]];
gridStyle.verticalLinesHidden = NO;
gridStyle.verticalFill = [TKSolidFill solidFillWithColor:[UIColor colorWithRed:1.f green:1.f blue:0.f alpha:0.1f]];
gridStyle.verticalAlternateFill = [TKSolidFill solidFillWithColor:[UIColor colorWithRed:0.f green:1.f blue:0.f alpha:0.1f]];
let gridStyle = chart.gridStyle
gridStyle.horizontalLineStroke = TKStroke(color: UIColor(white: 215.0 / 255.0, alpha: 1.0))
gridStyle.horizontalLineAlternateStroke = TKStroke(color: UIColor(white: 215.0 / 255.0, alpha: 1.0))
gridStyle.horizontalFill = TKSolidFill(color: UIColor(white: 228.0 / 255.0, alpha: 0.7))
gridStyle.horizontalAlternateFill = TKSolidFill(color: UIColor.white)
gridStyle.horizontalLinesHidden = false

gridStyle.verticalLineStroke = TKStroke(color: UIColor(white: 215.0 / 255.0, alpha: 1.0))
gridStyle.verticalLineAlternateStroke = TKStroke(color: UIColor(white: 215.0 / 255.0, alpha: 1.0))
gridStyle.verticalLinesHidden = false
gridStyle.verticalFill = TKSolidFill(color: UIColor(red: 1.0, green: 1.0, blue:0.0 , alpha: 0.1))
gridStyle.verticalAlternateFill = TKSolidFill(color: UIColor(red: 0.0, green: 1.0, blue: 0.0, alpha: 0.1))
var gridStyle = chart.GridStyle;

gridStyle.HorizontalLineStroke = new TKStroke (UIColor.FromWhiteAlpha (215.0f / 255.0f, 1.0f));
gridStyle.HorizontalLineAlternateStroke = new TKStroke (UIColor.FromWhiteAlpha (215.0f / 255.0f, 1.0f));
gridStyle.HorizontalFill = new TKSolidFill(UIColor.FromWhiteAlpha (228.0f / 255.0f, 1.0f));
gridStyle.HorizontalAlternateFill = new TKSolidFill (UIColor.White);
gridStyle.HorizontalLinesHidden = false;

gridStyle.VerticalLineStroke = new TKStroke (UIColor.FromWhiteAlpha (215.0f / 255.0f, 1.0f));
gridStyle.VerticalLineAlternateStroke = new TKStroke (UIColor.FromWhiteAlpha (215.0f / 255.0f, 1.0f));
gridStyle.VerticalLinesHidden = false;
gridStyle.VerticalFill = new TKSolidFill (new UIColor (1.0f, 1.0f, 0.0f, 0.1f));
gridStyle.VerticalAlternateFill = new TKSolidFill (new UIColor (0.0f, 1.0f, 0.0f, 0.1f));

Note how vertical fills are transparent. This is because in default mode horizontal fills are drawn first. However you can change the drawing order. Adding a single line of code to the snippet above will produce the effect below:

gridStyle.drawOrder = TKChartGridDrawModeVerticalFirst;
gridStyle.drawOrder = TKChartGridDrawMode.verticalFirst
gridStyle.DrawOrder = TKChartGridDrawMode.VerticalFirst;

As you can see vertical fills are missing. The reason is that in TKGridDrawModeVerticalFirst mode they are drawn first and then the non-transparent horizontal fills got drawn above. On order to address this, the fills which are drawn last always need to have some transparency. You can also draw all the fills with transparency, but in this case you might need to set:

gridStyle.backgroundFill = [TKSolidFill solidFillWithColor:[UIColor whiteColor]];
gridStyle.backgroundFill = TKSolidFill(color: UIColor.white)
gridStyle.BackgroundFill = new TKSolidFill (UIColor.White);

This will create a predictable background for the grid and plot area.

You can also use grid's background to set an image:

gridStyle.backgroundFill = [TKSolidFill solidFillWithColor:
                            [UIColor colorWithPatternImage:[UIImage imageNamed:@"telerik_logo"]]];
gridStyle.backgroundFill = TKSolidFill(color: UIColor(patternImage: UIImage(named: "logo")!))
gridStyle.BackgroundFill = new TKSolidFill(UIColor.FromPatternImage(new UIImage("telerk_logo.png")));

Using zPosition

zPosition property specifies the Z order of the grid. Grid is drawn below series by default. However you can change it so grid is above series:

TKChartGridStyle* gridStyle = chart.gridStyle;

gridStyle.horizontalLineStroke = [TKStroke strokeWithColor:[UIColor colorWithWhite:215.f/255.f alpha:1.f]];
gridStyle.horizontalLineAlternateStroke = [TKStroke strokeWithColor:[UIColor colorWithWhite:215.f/255.f alpha:1.f]];
gridStyle.horizontalLinesHidden = NO;
gridStyle.horizontalFill = [TKSolidFill solidFillWithColor:[UIColor colorWithWhite:228.f/255.f alpha:0.7f]];
gridStyle.horizontalAlternateFill = [TKSolidFill solidFillWithColor:[UIColor clearColor]];

gridStyle.verticalFill = nil;
gridStyle.verticalAlternateFill = nil;
gridStyle.verticalLinesHidden = YES;

gridStyle.zPosition = TKChartGridZPositionAboveSeries;
let gridStyle = chart.gridStyle
gridStyle.horizontalLineStroke = TKStroke(color: UIColor(white: 215.0 / 255.0, alpha: 1.0))
gridStyle.horizontalLineAlternateStroke = TKStroke(color: UIColor(white: 215.0 / 255.0, alpha: 1.0))
gridStyle.horizontalLinesHidden = false
gridStyle.horizontalFill = TKSolidFill(color: UIColor(white: 228.0 / 255.0, alpha: 0.7))
gridStyle.horizontalAlternateFill = TKSolidFill(color: UIColor.clear)

gridStyle.verticalFill = nil
gridStyle.verticalAlternateFill = nil
gridStyle.verticalLinesHidden = true
gridStyle.zPosition = TKChartGridZPosition.aboveSeries
var gridStyle = chart.GridStyle;

gridStyle.HorizontalLineStroke = new TKStroke (UIColor.FromWhiteAlpha (215.0f / 255.0f, 1.0f));
gridStyle.HorizontalLineAlternateStroke = new TKStroke (UIColor.FromWhiteAlpha (215.0f / 255.0f, 1.0f));
gridStyle.HorizontalLinesHidden = false;
gridStyle.HorizontalFill = new TKSolidFill (UIColor.FromWhiteAlpha (228.0f / 255.0f, 1.0f));
gridStyle.HorizontalAlternateFill = new TKSolidFill (UIColor.Clear);

gridStyle.VerticalFill = null;
gridStyle.VerticalAlternateFill = null;
gridStyle.VerticalLinesHidden = true;

gridStyle.ZPosition = TKChartGridZPosition.AboveSeries;