Multiple colors grid background

[jmamegroot]

Reference to my previous question: #2172

I still get it not working correctly. The colors are drawing upside down and it always start at half the height of the chart (see image). In this case the colors must be 50 --> 70 gray, 70 --> 80 green, 80+ yellow

Code:

import Foundation
import Charts

class YxisFormatter: YAxisRenderer {
    var maxHartslag : Double!
    
    public override func renderGridLines(context: CGContext) {
        guard let
            yAxis = self.axis as? YAxis
            else { return }
        
        if !yAxis.isEnabled
        {
            return
        }
        
        if yAxis.drawGridLinesEnabled
        {
            var positions = transformedPositions()
            
            let viewPortHandler = self.viewPortHandler
           
            var width =  (viewPortHandler?.contentBottom)! - (viewPortHandler?.contentTop)!
            if positions.count > 1
            {
                width = fabs(positions[0].y -  positions[1].y)
            }
            
            context.saveGState()
            defer { context.restoreGState() }
            context.clip(to: self.gridClippingRect)
            
            context.setShouldAntialias(yAxis.gridAntialiasEnabled)
            context.setStrokeColor(yAxis.gridColor.cgColor)
            context.setLineWidth(yAxis.gridLineWidth)
            context.setLineCap(yAxis.gridLineCap)
            
            if yAxis.gridLineDashLengths != nil
            {
                context.setLineDash(phase: yAxis.gridLineDashPhase, lengths: yAxis.gridLineDashLengths)
            }
            else
            {
                context.setLineDash(phase: 0.0, lengths: [])
            }
            
            print("----------------------")
            for i in 0 ..< positions.count
            {
                let currentColor = getColor(y: Int(positions[i].y))
                context.setStrokeColor(currentColor)
                context.setLineWidth(width)
                context.beginPath()
                context.move(to: CGPoint(x: viewPortHandler!.contentLeft, y: positions[i].y))
                context.addLine(to: CGPoint(x: viewPortHandler!.contentRight, y:  positions[i].y))
                context.strokePath()
            }
            print("----------------------")
            print("\n")
        }
        if yAxis.drawZeroLineEnabled
        {
            drawZeroLine(context: context)
        }
    }
    
    func getColor(y : Int) -> CGColor{
        let maxZone = Int(Double(maxHartslag / 100 * 45))
        let zwaarZone = Int(Double(maxHartslag / 100 * 36))
        let gemZone = Int(Double(maxHartslag / 100 * 34))
        let lichtZone = Int(Double(maxHartslag / 100 * 32))
        let zLichtZone = Int(Double(maxHartslag / 100 * 30))
        
        if y >= maxZone{
            print("\(y) ->  rood")
            return UIColor.init(red: 255, green: 40/255, blue: 60/255, alpha: 1).cgColor
        }
        else if y >= zwaarZone && y < maxZone{
            print("\(y) ->  geel")
            return UIColor.init(red: 240/255, green: 169/255, blue: 31/255, alpha: 1).cgColor
        }
        else if y >= gemZone && y < zwaarZone{
            print("\(y) ->  groen")
            return UIColor.init(red: 42/255, green:159/255, blue: 85/255, alpha: 1).cgColor
        }
        else if y >= lichtZone && y < gemZone{
            print("\(y) ->  blauw")
            return UIColor.init(red: 67/255, green: 153/255, blue: 212/255, alpha: 1).cgColor
        }
        else if y >= zLichtZone && y < lichtZone{
            print("\(y) ->  grijs")
            return UIColor.init(red: 159/255, green: 170/255, blue: 170/255, alpha: 1).cgColor
        }
        else if y > 0 && y < zLichtZone{
            print("\(y) ->  grijs")
            return UIColor.init(red: 159/255, green: 170/255, blue: 170/255, alpha: 1).cgColor
        }
        else{
            print("\(y) ->  grijs")
            return UIColor.init(red: 159/255, green: 170/255, blue: 170/255, alpha: 1).cgColor
        }
    }
}

[liuxuan30]

to draw gird background color, you need to know where '50' is, it can be done by using pointValueToPixel() in ChartTransformer. Once you know where the boundary is, you can fill the color then.

So take a look at how drawLimitLine() is implemented, that will give you some ideas.

[jmamegroot]

Hello Liuxuan,

Do you have an example of how to use the pointValueToPixel method? And I can't find the method drawLimitLine() implementation

[liuxuan30]

my bad, it's called renderLimitLines. These are examples.
basically, it's for converting your data values into pixel values. There are lots of similar APIs to use, so pick one yourself.

[jmamegroot]

I have now changed my code but its still not working. The line position = position.applying(trans) doesn't change anything. What do I wrong?

Code:

let trans = transformer.valueToPixelMatrix
            
            for i in 0 ..< positions.count
            {
                context.saveGState()
                defer { context.restoreGState() }
                
                var clippingRect = viewPortHandler.contentRect
                clippingRect.origin.y -= width / 2.0
                clippingRect.size.height += width
                context.clip(to: clippingRect)
                
                var position = positions[i]
                
                position = position.applying(trans)
                
                drawGridLine(context: context, position: position)
                
                context.beginPath()
                context.move(to: CGPoint(x: viewPortHandler.contentLeft, y: position.y))
                context.addLine(to: CGPoint(x: viewPortHandler.contentRight, y: position.y))
                context.setStrokeColor(getColor(y: Int(position.y)))
                context.setLineWidth(width)
                
                if yAxis.gridLineDashLengths != nil
                {
                    context.setLineDash(phase: yAxis.gridLineDashPhase, lengths: yAxis.gridLineDashLengths)
                }
                else
                {
                    context.setLineDash(phase: 0.0, lengths: [])
                }
                
                context.strokePath()
            }
            
            if yAxis.drawZeroLineEnabled
            {
                drawZeroLine(context: context)
            }

[Seokang]

@jmamegroot
Thanks for your code
I found solution for your code

I'm fill area between two limit lines.

My Full Code :

import Foundation
import Charts

public class ChartYAxisArea:YAxisRenderer {
    
    public override func renderGridLines(context: CGContext) {
           super.renderGridLines(context: context)
           
           renderLimitArea(context: context)
    }
    
    public func transformedLimitPositions() -> [CGPoint] {
        guard
            let yAxis = self.axis as? YAxis,
            let transformer = self.transformer
            else { return [CGPoint]() }
        
        var positions = [CGPoint]()
        positions.reserveCapacity(yAxis.limitLines.count)
        
    
        let limitLines = yAxis.limitLines

        for i in stride(from: 0, to: yAxis.limitLines.count, by: 1)
        {
            positions.append(CGPoint(x: 0.0, y: limitLines[i].limit))
        }
        
        transformer.pointValuesToPixel(&positions)
        
        return positions
    }
    
    public func renderLimitArea(context: CGContext) {
        guard let
            yAxis = self.axis as? YAxis
            else { return }
        
        if !yAxis.isEnabled {
            return
        }
        if yAxis.limitLines.count > 1 {
            var limitPositions = transformedLimitPositions()
            
            let viewPortHandler = self.viewPortHandler
           
            var width =  (viewPortHandler.contentBottom) - (viewPortHandler.contentTop)
            if limitPositions.count > 1 {
                width = abs(limitPositions[0].y -  limitPositions[1].y)
            }
            
            context.saveGState()
            defer { context.restoreGState() }
            context.clip(to: self.gridClippingRect)
            

            context.setShouldAntialias(yAxis.gridAntialiasEnabled)
            context.setStrokeColor(yAxis.gridColor.cgColor)
            context.setLineWidth(yAxis.gridLineWidth)
            context.setLineCap(yAxis.gridLineCap)
            
            if yAxis.gridLineDashLengths != nil {
                context.setLineDash(phase: yAxis.gridLineDashPhase, lengths: yAxis.gridLineDashLengths)
            }
            else {
                context.setLineDash(phase: 0.0, lengths: [])
            }
            
            print("----------------------")
            for i in stride(from: 0, to: limitPositions.count, by: 2){
                let currentColor = getColor(index: i)
                context.setStrokeColor(currentColor)
                context.setLineWidth(width)
                context.beginPath()
                context.move(to: CGPoint(x: viewPortHandler.contentLeft, y: (limitPositions[i].y + limitPositions[i+1].y)/2))
                context.addLine(to: CGPoint(x: viewPortHandler.contentRight, y:  (limitPositions[i].y + limitPositions[i+1].y)/2))
                context.strokePath()
            }
            print("----------------------")
            print("\n")
        }
    }
    
    func getColor(index : Int) -> CGColor{
        var color:CGColor
        if index == 0 {
            color = UIColor(hex: "#2DBE9D")!.withAlphaComponent(0.2).cgColor
        }else {
            color = UIColor(hex: "#6945AC")!.withAlphaComponent(0.2).cgColor
        }
        print(color.alpha)
        return color
    }
    
}

func drawLimitArea(){
        let first:ChartLimitLine = ChartLimitLine(limit: Double(180), label: "")
        first.lineWidth = 1
        first.lineColor = UIColor.white.withAlphaComponent(0)
        first.lineDashLengths = []
        first.lineDashPhase = 0.0
        
              
        let second:ChartLimitLine = ChartLimitLine(limit: Double(60), label: "")
        second.lineWidth = 1
        second.lineColor = UIColor.white.withAlphaComponent(0)
        second.lineDashLengths = []
        second.lineDashPhase = 0.0
        
        let third:ChartLimitLine = ChartLimitLine(limit: Double(1080), label: "")
        third.lineWidth = 1
        third.lineColor = UIColor.white.withAlphaComponent(0)
        third.lineDashLengths = []
        third.lineDashPhase = 0.0
              
        let fourth:ChartLimitLine = ChartLimitLine(limit: Double(960), label: "")
        fourth.lineWidth = 1
        fourth.lineColor = UIColor.white.withAlphaComponent(0)
        fourth.lineDashLengths = []
        fourth.lineDashPhase = 0.0
        
        lineChartView.leftAxis.addLimitLine(first)
        lineChartView.leftAxis.addLimitLine(second)
        lineChartView.leftAxis.addLimitLine(third)
        lineChartView.leftAxis.addLimitLine(fourth)
        lineChartView.leftAxis.drawGridLinesEnabled = false
        

        lineChartView.leftYAxisRenderer = ChartYAxisArea(viewPortHandler: lineChartView.viewPortHandler!, yAxis: lineChartView.leftAxis, transformer: lineChartView.getTransformer(forAxis: .left))
    }

Result

[muhammadyousaf]

can we achieve the same thing for xAxis?
can you please guide me.

[Seokang]

@muhammadyousaf

Change YAxisRender -> XAxisRender