Vertical lines at X Axis iOS-charts

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

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 2

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..!!

Answer 3

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!