How to create a Line Chart using ios-charts

This tutorial is part of a series on iso-charts, if you haven't looked over the introduction I'd advise doing so before continuing. In this tutorial we'll be making a single line Line Chart using iOS-charts.

We’ll begin by creating a new single view application, we’ll name it and click create.

Go to the main.storyboard and search for “View” in the Object Library and you’ll see it near the bottom of the list. Drag the view out onto your view controller, position it however you like and add some basic constraints.

In the identity inspector, set your class to “LineChartView”, if you aren’t seeing an option for such a class please make sure you’ve followed the installation steps listed here.

If everything has gone well your main.storyboard should look like this:


Setting up our LineChartView object

Click on your Assistant Editor to reveal your ViewController.swift code. We’ll need to add an import statement and adopt a protocol before we can begin wiring up our Line Chart. Modify your class signature to look like this:

import Charts
class ViewController: UIViewController, ChartViewDelegate { //...

Now we can control drag from our View to our ViewController class and create an outlet named lineChartView with a type of LineChartView.

20151018043325Screenshot 2015-10-17 22.34.21.png
@IBOutlet weak var lineChartView: LineChartView!

We can now start setting the properties of our lineChartView object. in your viewDidLoad add the following lines of code:

override func viewDidLoad() {
    // 1
    self.lineChartView.delegate = self
    // 2
    self.lineChartView.descriptionText = "Tap node for details"
    // 3
    self.lineChartView.descriptionTextColor = UIColor.whiteColor()
    self.lineChartView.gridBackgroundColor = UIColor.darkGrayColor()
    // 4
    self.lineChartView.noDataText = "No data provided"
    // 5

func setChartData() {


  1. We set the ChartViewDelegate to our ViewController.
  2. We change the `descriptionText` that will appear at the bottom of our chart.
  3. Here, we set our description text color to white and our grid background color to dark grey.
  4. We make sure our user get feedback if there is not data provided.
  5. Finally, we call / create a custom function that will add data to our chart.

Setting Data

Of course, a very common thing to chart is money over time, and that what we’ll do in this example. So we’ll modify the signature of our setChartData method call to take an array of strings for our months.

setChartData(months) // in viewDidLoad
func setChartData(months : [String]) { }

And we’ll have to create an array of months as a class level object. While we’re at it, lets go ahead and add three variables that hold our month-to-month dollar amount.

let months = ["Jan" , "Feb", "Mar", "Apr", "May", "June", "July", "August", "Sept", "Oct", "Nov", "Dec"]
let dollars1 = [1453.0,2352,5431,1442,5451,6486,1173,5678,9234,1345,9411,2212]

For this part of the tutorial, we'll set our chart up with just one set of data, which will create a single red line across our graph. First the code, then the explanation.

func setChartData(months : [String]) {
    // 1 - creating an array of data entries
    var yVals1 : [ChartDataEntry] = [ChartDataEntry]()
    for var i = 0; i < months.count; i++ {
        yVals1.append(ChartDataEntry(value: dollars1[i], xIndex: i))
    // 2 - create a data set with our array
    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)) // our line's opacity is 50%
    set1.setCircleColor(UIColor.redColor()) // our circle will be dark red
    set1.lineWidth = 2.0 
    set1.circleRadius = 6.0 // the radius of the node circle
    set1.fillAlpha = 65 / 255.0
    set1.fillColor = UIColor.redColor()
    set1.highlightColor = UIColor.whiteColor()
    set1.drawCircleHoleEnabled = true
    //3 - create an array to store our LineChartDataSets
    var dataSets : [LineChartDataSet] = [LineChartDataSet]()
    //4 - pass our months in for our x-axis label value along with our dataSets
    let data: LineChartData = LineChartData(xVals: months, dataSets: dataSets)
    //5 - finally set our data = data            
  1. We start by creating an array of ChartDataEntry items, to which we'll create and append one item for every value stored in our dollars array.
  2. We create a LineChartDataSet that take our array as its first parameter and a label for its second, this dataset represents the line we'll be creating. We continue by setting the attributes that belong to this class object.
  3. Since we're ultimately on a path to create a multi-lined array, we'll create a data set array that will just hold our single set.
  4. Create a data object that takes our months and our single data set.
  5. Set it as our lineCharView objects data 

Build and run

Build and run and you should see your first chart, congratulations, it gets better from here so move on to part II, where we augment this chart with multiple lines.

20151018050325Screen Shot 2015-10-18 at 12.02.56 AM.png