Vertical lines at X Axis iOS-charts - ios

Question

Maybe this is a simple question but I wanted to know how I can draw vertical lines under X Axis and upper labels in X Axis in iOS-charts. (See the pic, like red lines)
UPDATE: the library I'm using is this https://github.com/danielgindi/ios-charts

Answer 1

I managed to draw the ticks below the x axis by overriding drawLabel. This function draws the labels below the x axis and therefore can draw something else there. For example our desired ticks!
class XAxisRendererWithTicks: XAxisRenderer {
override func drawLabel(context: CGContext, formattedLabel: String, x: CGFloat, y: CGFloat, attributes: [NSAttributedString.Key: Any], constrainedToSize: CGSize, anchor: CGPoint, angleRadians: CGFloat) {
super.drawLabel(context: context, formattedLabel: formattedLabel, x: x, y: y, attributes: attributes, constrainedToSize: constrainedToSize, anchor: anchor, angleRadians: angleRadians)
context.beginPath()
context.move(to: CGPoint(x: x, y: y))
context.addLine(to: CGPoint(x: x, y: self.viewPortHandler.contentBottom))
context.strokePath()
}
}
To use the custom renderer:
let customXAxisRenderer = XAxisRendererWithTicks(viewPortHandler: self.chartView.viewPortHandler, xAxis: xAxis, transformer: self.chartView.getTransformer(forAxis: .left))
self.chartView.xAxisRenderer = customXAxisRenderer
Example image: Please don´t mind the colors but I think you get what I mean. ;)
Hope this helps!

Answer 2

You could, but you have to override some methods, take a look at drawGridLine() and drawLabels() in x axis renderer for example.
drawGridLine gives you the full details about how to draw a grid line in ios-charts, understaning it will be very helpful to write your own customizations.

Answer 3

Set major tick locations and minor tick locations for the axis you want to get the lines like red color. Please try with the following sample code written for x-axis of the graph.
CPTXYAxisSet *axisSet = (CPTXYAxisSet *)graph.axisSet;
CPTXYAxis *x = axisSet.xAxis; //Get the axis of the graph
// x and y axis line color
CPTMutableLineStyle *axisLineStyle = [CPTMutableLineStyle lineStyle];
axisLineStyle.lineWidth = 2.0f;
axisLineStyle.lineColor = [CPTColor whiteColor]; //Set color whatever you want
//Text Style for axis title
CPTMutableTextStyle *axisTextStyle = [[CPTMutableTextStyle alloc] init];
axisTextStyle.color = [CPTColor whiteColor]; //Set color whatever you want
// Line color
CPTMutableLineStyle *tickLineStyle = [CPTMutableLineStyle lineStyle];
tickLineStyle.lineColor = [CPTColor whiteColor]; //Set color whatever you want
tickLineStyle.lineWidth = 2.0f;
x.title = #"Title for the axis";
x.titleOffset = 50.0f;
x.axisLineStyle = axisLineStyle; //axis line style
x.titleTextStyle = axisTextStyle; //axis title text style
x.majorTickLineStyle = axisLineStyle; //Major axis tick style which you wanted
x.minorTickLineStyle = axisLineStyle; //Minor axis tick style
x.labelTextStyle = axisTextStyle; //axis label text style
x.labelingPolicy = CPTAxisLabelingPolicyNone; //axis labeling policy
x.tickDirection = CPTSignNegative; //This will set the red lines below the x-axis as displayed in screenshot you have attached.
Have a happy coding..!!