Fill the color between two line charts using IFillFormatter

[shekhargupta]

Thanks for this library!!

I am trying to fill color between two lines by it is fill the color till the axis. Please suggest something. Thanks!

Current ouptput:

Actual line fill color should be something like this

Code:

import Charts

class ChartsViewController: UIViewController, ChartViewDelegate {
    
    @IBOutlet weak var lineChartView: LineChartView!
    
    let months = ["Jan" , "Feb", "Mar", "Apr", "May", "June", "July", "August", "Sept", "Oct", "Nov", "Dec"]
    
    let dollars1 = [0.0, 150, 400, 600, 800, 1000, 1200, 1400, 1600, 1800, 2000, 2200]
    let dollars2 = [0.0, 100, 300, 500, 700, 900, 1100, 1300, 1500, 1700, 1900, 2100]
    let dollars3 = [0.0, 50, 180, 350, 550, 730, 940, 1150, 1350, 1550, 1750, 1950]
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // 1
        self.lineChartView.delegate = self
        // 2
        self.lineChartView.chartDescription?.text = "Tap node for details"
        // 3
        self.lineChartView.chartDescription?.textColor = UIColor.white
        self.lineChartView.gridBackgroundColor = UIColor.darkGray
        // 4
        self.lineChartView.noDataText = "No data provided"
        // 5
        
        self.lineChartView.backgroundColor = UIColor.white
        self.lineChartView.drawGridBackgroundEnabled = true
        self.lineChartView.drawBordersEnabled = true
        self.lineChartView.chartDescription?.enabled = false
        self.lineChartView.pinchZoomEnabled = false
        self.lineChartView.dragEnabled = false

        
        setChartData(months: months)
        
    }
    
    func setChartData(months : [String]) {
        
        // 1 - creating an array of data entries
        var yVals1 : [ChartDataEntry] = [ChartDataEntry]()
        var yVals2 : [ChartDataEntry] = [ChartDataEntry]()
        var yVals3 : [ChartDataEntry] = [ChartDataEntry]()
        
        for i in 0..<months.count {
            yVals1.append(ChartDataEntry(x: Double(i), y: dollars1[i]))
        }
        
        for i in 0..<months.count {
            yVals2.append(ChartDataEntry(x: Double(i), y: dollars2[i]))
        }
        
        for i in 0..<months.count {
            yVals3.append(ChartDataEntry(x: Double(i), y: dollars3[i]))
        }
        

        // 2 - create a data set with our array
        let set1: LineChartDataSet = LineChartDataSet(values: yVals1, label: "First Set")
        set1.axisDependency = .left // Line will correlate with left axis values
        set1.setColor(UIColor.red.withAlphaComponent(0.5)) // our line's opacity is 50%
        set1.drawCirclesEnabled = false
        set1.lineWidth = 2.0
        set1.circleRadius = 0.0 // the radius of the node circle
        set1.fillAlpha = 65 / 255.0
        set1.drawFilledEnabled = true
        set1.fillColor = UIColor.white
        set1.highlightColor = UIColor.white
        set1.drawCircleHoleEnabled = true
        set1.mode = .cubicBezier
//        set1.fillFormatter = MyFillFormatter(chartView: self.lineChartView)
        set1.fillFormatter = DefaultFillFormatter(block: { (dataSet: ILineChartDataSet, dataProvider: LineChartDataProvider) -> CGFloat in
            return CGFloat(self.lineChartView.xAxis.axisMinimum)
        })
        
        
        let set2: LineChartDataSet = LineChartDataSet(values: yVals2, label: "second Set")
        set2.axisDependency = .left // Line will correlate with left axis values
        set2.setColor(UIColor.green.withAlphaComponent(0.5)) // our line's opacity is 50%
        set2.drawCirclesEnabled = false
//        set2.drawFilledEnabled = true
        set2.lineWidth = 2.0
        set2.circleRadius = 0.0 // the radius of the node circle
        set2.fillAlpha = 65 / 255.0
        set2.drawCirclesEnabled = true
        set2.fillColor = UIColor.green
        set2.highlightColor = UIColor.darkGray
        set2.drawCircleHoleEnabled = true
        set2.mode = .cubicBezier
//        set2.fillFormatter = DefaultFillFormatter(block: { (dataSet: ILineChartDataSet, dataProvider: LineChartDataProvider) -> CGFloat in
//            return CGFloat(set1.yMax)
//        })

        
        let set3: LineChartDataSet = LineChartDataSet(values: yVals3, label: "third Set")
        set3.axisDependency = .left // Line will correlate with left axis values
        set3.setColor(UIColor.yellow.withAlphaComponent(0.5)) // our line's opacity is 50%
        set3.drawCirclesEnabled = false
//        set3.drawFilledEnabled = true
        set3.lineWidth = 2.0
        set3.circleRadius = 0.0 // the radius of the node circle
        set3.fillAlpha = 65 / 255.0
        set3.fillColor = UIColor.yellow
        set3.highlightColor = UIColor.darkGray
        set3.drawCircleHoleEnabled = true
        set3.mode = .cubicBezier
//        set3.fillFormatter = DefaultFillFormatter(block: { (dataSet: ILineChartDataSet, dataProvider: LineChartDataProvider) -> CGFloat in
//            return CGFloat(set2.yMax)
//        })
        
        
        //3 - create an array to store our LineChartDataSets
        var dataSets : [LineChartDataSet] = [LineChartDataSet]()
        dataSets.append(set1)
        dataSets.append(set2)
        dataSets.append(set3)
        
        //4 - pass our months in for our x-axis label value along with our dataSets
        let data: LineChartData = LineChartData(dataSets: dataSets)
        data.setValueTextColor(UIColor.clear)
        data.setDrawValues(false)
        
        //5 - finally set our data
        self.lineChartView.data = data
        
        //6 - add x-axis label
        let xaxis = self.lineChartView.xAxis
        xaxis.valueFormatter = MyXAxisFormatter(months)
        
    }
    
}

class MyXAxisFormatter: NSObject, IAxisValueFormatter {
    let months: [String]
    init(_ months: [String]) {
        self.months = months
    }
    
    func stringForValue(_ value: Double, axis: AxisBase?) -> String {
        return months[Int(value)]
    }
    
}```

[odanu]

@shekhargupta Did you manage to find a solutions?