ticks below x-axis (iOS Charts)

Question

I want to make ticks below the x-axis where the date labels (3.6., 7.6., 12.6. 17.6, 21.6., 26.6.) are (see image below). I'm using the iOS Charts library (https://github.com/danielgindi/Charts).

I managed to make ticks inside the graph by overriding the drawGridLinemethod. All I did was change the beginning of the line segment from viewPortHandler.contentTop to viewPortHandler.contentBottom - 5. I.e. the grid line starts 5 pixels above the x-axis. However, when extending the grid line beyond the x-axis (viewPortHandler.contentBottom + 10), the line still only gets drawn down to the x-axis, but not below. Can somebody point me in the right direction? How do I draw the vertical lines below the x-axis?

Here is my custom XAxisRenderer:

class XAxisRendererWithTicks: XAxisRenderer {

    override func drawGridLine(context: CGContext, x: CGFloat, y: CGFloat) {
        guard
            let viewPortHandler = self.viewPortHandler
            else { return }

        if x >= viewPortHandler.offsetLeft
            && x <= viewPortHandler.chartWidth
        {
            context.beginPath()
            context.move(to: CGPoint(x: x, y: viewPortHandler.contentBottom - 5))
            context.addLine(to: CGPoint(x: x, y: viewPortHandler.contentBottom + 10))
            context.strokePath()
        }
    }
}

The ticks appear, but I want them to be below the x-axis:

There is a similar question here, but its answers didn't really help me: Vertical lines at X Axis iOS-charts

Answer 1

I think drawGridLine is not the right function for this because you can not draw below the x axis.

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!