Adding multiple lines to your Line Chart using ios-charts

In part 1 we created a single line chart, in this tutorial we'll simply add 2 more data sets to our Line-Chart.

Multiple Lines

To add multiple lines you simply add multiple datasets like so:

    
let dollars1 = [1453.0,2352,5431,1442,5451,6486,1173,5678,9234,1345,9411,2212]
let dollars2 = [5641.0,2234,8763,4453,4548,6236,7321,3458,2139,399,1311,5612]
let dollars3 = [6541.0,3456,7843,5678,5877,7323,7111,6456,5143,4562,6311,10412]
    

Once you have your data sets you can simply repeat what we've did in our last tutorial to add additional lines:

    
func setChartData(months : [String]) {
        
    var yVals1 : [ChartDataEntry] = [ChartDataEntry]()
    for var i = 0; i < months.count; i++ {
        yVals1.append(ChartDataEntry(value: dollars1[i], xIndex: i))
    }
        
    let set1: LineChartDataSet = LineChartDataSet(yVals: yVals1, label: "First Set")
    set1.axisDependency = .Left // Line will correlate with left axis values
    set1.setColor(UIColor.redColor().colorWithAlphaComponent(0.5))
    set1.setCircleColor(UIColor.redColor())
    set1.lineWidth = 2.0
    set1.circleRadius = 6.0
    set1.fillAlpha = 65 / 255.0
    set1.fillColor = UIColor.redColor()
    set1.highlightColor = UIColor.whiteColor()
    set1.drawCircleHoleEnabled = true
        
    var yVals2 : [ChartDataEntry] = [ChartDataEntry]()
    for var i = 0; i < months.count; i++ {
        yVals2.append(ChartDataEntry(value: dollars2[i], xIndex: i))
    }
        
    let set2: LineChartDataSet = LineChartDataSet(yVals: yVals2, label: "Second Set")
    set2.axisDependency = .Left // Line will correlate with left axis values
    set2.setColor(UIColor.greenColor().colorWithAlphaComponent(0.5))
    set2.setCircleColor(UIColor.greenColor())
    set2.lineWidth = 2.0
    set2.circleRadius = 6.0
    set2.fillAlpha = 65 / 255.0
    set2.fillColor = UIColor.greenColor()
    set2.highlightColor = UIColor.whiteColor()
    set2.drawCircleHoleEnabled = true
        
    var yVals3 : [ChartDataEntry] = [ChartDataEntry]()
    for var i = 0; i < months.count; i++ {
        yVals3.append(ChartDataEntry(value: dollars3[i], xIndex: i))
    }
        
    let set3: LineChartDataSet = LineChartDataSet(yVals: yVals3, label: "Second Set")
    set3.axisDependency = .Left // Line will correlate with left axis values
    set3.setColor(UIColor.blueColor().colorWithAlphaComponent(0.5))
    set3.setCircleColor(UIColor.blueColor())
    set3.lineWidth = 2.0
    set3.circleRadius = 6.0
    set3.fillAlpha = 65 / 255.0
    set3.fillColor = UIColor.blueColor()
    set3.highlightColor = UIColor.whiteColor()
    set3.drawCircleHoleEnabled = true
        
    //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(xVals: months, dataSets: dataSets)
    data.setValueTextColor(UIColor.whiteColor())
        
    //5 - finally set our data
    self.lineChartView.data = data
}

Build and run

You should now see multiple lines on your graph, if you're having an issue check out the project files.

In Tags