Building your own chart in iOS — Part 2: Line chart

In this article, I will share with you a way to build curved line chart. There are some good chart libraries out there for iOS, however, if you have to build it on your own for some reasons, I think this article will be useful to you :).

You don’t need to read Part 1 in order to understand this tutorial. However, you can read it here if you want to.

I use Swift 3.0 and XCode 8.3.3 for the sample project and the source code is provided at the end of this article.

Objective

Let’s build a chart like this:

Curved Line Chart

What you need to know

Here are the ingredients for building that chart:

• UIScrollView: to enable left and right scrolling
• UIBezierPath: to create paths for shapes
• CALayer
• CAShapeLayer: to create straight lines / curved lines in the chart above
• CAGradientLayer
• CATextLayer: to display text

Let’s begin

I will create a class called LineChart which is a subclass of UIView. I will not explain every single line of code in LineChart.swift but instead, I will just show the main idea here. Below are all sub views…