How to set multiple background colors in iOS Chart Graph Framework

Question

I want to set multiple background colors in a chart view. A single color can be set in a background of the chart view but there is no way to set multiple colors.

Percentage-wise wants to add background color 0% to 20% - Red color, 21% to 60% - White and 61% to 100% in green color

Answer 1

I think you are looking for CAGradientLayer, it might help you.

let gradient = CAGradientLayer()
gradient.colors = [UIColor.red.cgColor, UIColor.green.cgColor]
gradient.locations = [0.0, 1.0]

let view = UIView()
view.layer.insertSublayer(gradient, at: 0)

The view is where you would like to apply the collors.

If you want more details: https://developer.apple.com/documentation/quartzcore/cagradientlayer

Answer 2

My way is to use filled line charts for background colours. You need to add two additional data sets, one for the red area and another for the green area. Also, you need to use custom FillFormatter for filling a green area from top to a chart line.

In this exapmle, I define addFillingArea function and use it for adding two additional data sets.

override func viewDidLoad() {
    super.viewDidLoad()

    // ...

    let chartData = LineChartData()

    addFillingArea(to: chartData, withColor: .red, xFirstValue: 0, xLastValue: 11, yValue: 6)
    addFillingArea(to: chartData, withColor: .green, xFirstValue: 0, xLastValue: 11, yValue: 12, fillFormatter: TopToLineFillFormatter())

    // add your data to chartData here

    lineChartView.data = chartData

    // ...
}

func addFillingArea(to chartData: ChartData, withColor color: UIColor, xFirstValue: Double, xLastValue: Double, yValue: Double, fillFormatter: IFillFormatter? = nil) {
    let dataEntries = [
        ChartDataEntry(x: xFirstValue, y: yValue),
        ChartDataEntry(x: xLastValue, y: yValue)
    ]

    let chartDataSet = LineChartDataSet(values: dataEntries, label: nil)
    chartDataSet.setColor(.clear)
    chartDataSet.drawValuesEnabled = false
    chartDataSet.drawCirclesEnabled = false

    chartDataSet.drawFilledEnabled = true
    chartDataSet.fillAlpha = 0.5
    chartDataSet.fill = Fill(CGColor: color.cgColor)
    chartDataSet.fillFormatter = fillFormatter

    chartData.addDataSet(chartDataSet)
}

class TopToLineFillFormatter: NSObject, IFillFormatter {
    func getFillLinePosition(dataSet: ILineChartDataSet, dataProvider: LineChartDataProvider) -> CGFloat {
        var fillMin: CGFloat = 0.0

        fillMin = CGFloat( dataProvider.chartYMax )

        return fillMin
    }
}

Answer 3

I was done using this way. First I make the constant height of the ChartView (eg. 150). And set draw limit lines behind data.

// Set the height the chart view
chartViewHeight.constant = 150

//Call below function like this
self.setupCommonProperties(chartView: barChartView)

// Limit line function
   func setLimitLine(chartView: BarLineChartViewBase) {
    let leftAxis = chartView.leftAxis
    leftAxis.removeAllLimitLines()
    var index = 0
    while index < 20 {
        let ll1 = ChartLimitLine(limit: Double(80 + index), label: "")
        ll1.lineWidth = chartViewHeight.constant / 100
        ll1.drawLabelEnabled = false
        ll1.lineColor = NSUIColor(red: 193.0/255.0, green: 255.0/255.0, blue: 189.0/255.0, alpha: 1.0)
        leftAxis.addLimitLine(ll1)

        let ll2 = ChartLimitLine(limit: Double(0 + index), label: "")
        ll2.lineWidth = chartViewHeight.constant / 100
        ll2.drawLabelEnabled = false
        ll2.lineColor = NSUIColor(red: 194.0/255.0, green: 81.0/255.0, blue: 82.0/255.0, alpha: 1.0)
        ll2.lineDashLengths = [0,0]
        leftAxis.addLimitLine(ll2)

        index += 1
    }

    leftAxis.axisMaximum = 100
    leftAxis.axisMinimum = 0
    leftAxis.drawLimitLinesBehindDataEnabled = true
}