Multiline Chart in SwiftUI — IOS Charts

Hi Guys in this video, I will teach you how you can make the multiline chart into the SwiftUI by using the very famous library IOS-Charts. So, let's get started.

Step-1

First of all, you need to install the IOS-Charts library into your project by using cocoapods.

pod ‘Charts’

If you need more methods for adding the IOS-Charts into your project, then go to the following link.

https://github.com/danielgindi/Charts

Step-2

The second step is to create the SwiftUI project in XCode.

Create the SwiftUI Project

SAMSUNG Galaxy S21 Ultra 5G Factory Unlocked Android Cell Phone 128GB US Version Smartphone…

Step-3

Now, go to the ContentView file and Import the Chart by using

import Charts

Step-4

Now make a struct called MultiLineChartView and inharid this struct with the UIViewRepresentable protocol. If we want to use IOS UIKit View into the SwiftUI we use UIViewRepresentable.

After using the UIViewRepresentable protocol, you need to implement the two methods

1. makeUIView
2. updateUIView

In the following code, you can see I am taking two entries which are entries1, & entries2. These entries are X, Y values on which we are going to draw the line onto the chart. One var is days where I am going to display week days names.

We are going to draw LineChartView so that’s why the makeUIView returning the LineChartView. updateUIView function getting the data and update the UI. The createChart method is creating or designing the chart. addData method is returning the DataSets which will display in the Chart.

Step-5 — createChart(chart: )

In this step, I am going to explain to you the purpose of createChart. But first, you look at the code.

So, look at the createChart method code it's easy to understand.

chart.chartDescription?.enabled = false

chartDescription enabled false meaning don't show the charDescription.

chart.xAxis.drawGridLinesEnabled = false

drawGripLinesEnabled false meaning that to hide the xAxis grid lines.

chart.xAxis.drawLabelsEnabled = true

drawLabelsEnabled true is used to showing the xAxis labels.

chart.xAxis.drawAxisLineEnabled = false

That's to hide the xAxis line.

chart.xAxis.labelPosition = .bottom

That code is used for xAxis positioning to bottom, by default it will be top.

All remaining fields are also similar to these you can test them one by one but One field is very important to show the custom labels, & that is the following field.

chart.xAxis.valueFormatter = CustomChartFormatter(days: days)

Here I made a CustomChartFormatter which is taking the days list & then show these days on xAxis instead of X coordinates. If you don't use this then the X coordinates values will show here.

Remember coordinates could be numbers not Strings etc.

Step-6 — CustomChartFormatter

The CustomChartFormatter is just simply getting the xAxis Coordinates values & print our day's list values.

Step-7 — addData( )

In addData method, I am using the generateLineChartDataSet method. This method is for designing the single line which will represent on the Chart. It takes the list of the ChartDataEntry and some colors for designing and return the LineChartDataSet. So if we have multiple sets of entries then we can generate multiple LineChartDataSet and then put these DataSets into the LineChartData and return the LineChartData from addData and that addData function is using into the updateUIView & that view will update the chart with respect to the given Data.

So after this, we can use that MultiLineChartView into any SwiftUI View & that will show the MultiLine Chat.

UIColor(Color(#colorLiteral(red: 0.003921568627, green: 0.231372549, blue: 0.431372549, alpha: 1)))

Remember the above code line is just the color. I am using the colorLiteral so that's why this is looking very tricky. You can use your own colors.

SAMSUNG Galaxy S21 Ultra 5G Factory Unlocked Android Cell Phone 128GB US Version Smartphone…

Step-8

So, Now use MultiLineChartView like this

So here I am showing the data for a week. So if you want to show more than data then you can increase the number of entries. So that’s it from my side hope you understand.

Complete Code:

Hope you under stand, if you have any issue then let me know i will guide you. 👌👌👌👌👌👌👌👌👌👌👌👌👌👌👌👌👌👌👌👌👌👌👌👌👌👌👌👌👌👌

Patreon

M.Abbas is creating IOS Developer | Patreon