Plotting in IOS using Charts framework with SwiftUI

Charts is a framework for plotting in IOS created by Daniel Cohen Gindi and Philipp Jahoda. This framework enables you to quickly plot beautiful charts of differnt types:

1. Line chart
2. Bar Chart
3. Horizontal Bar Chart
4. Pie Chart
5. Radar Chart
6. Combined Charts

The framework works amazingly well with SwiftUI. SwiftUI + Charts is the best way to get acquainted with the Charts framework because of the SwiftUI live previews feature.

I decided to publish this detailed step-by-step guide on drawing a Bar chart. For each step, I made an animation. If you do not need too many details you can explore the code with comments in the end of the article.

First, download Charts framework and add it to your project:

Next you have to create wrapper struct so that Charts framework works with SwiftUI.

1. Create new swift file
2. Import SwiftUI and Charts frameworks
3. Create new struct “Bar”. The struct has to conform to UIViewRepresentable protocol. You need two methods to conform to the protocol : makeUIView and updateUIView
4. makeUIView returns UIView. In our case BarChartView from Charts framework.
5. updateUIView method will contain the code to update view if input data for our chart changes.

1. In makeUIView create new BarChartView object and complete method with return statement.
2. Leave updateUIView method blank at the moment
3. Your project should compile without errors at this moment

Now as Bar struct compiles it’s time to create SwiftUI live preview.

1. Open canvas by pressing command+option+return keys
2. Press create preview button in canvas
3. Replace Text(“Hello world!”) view with Bar() view and press resume in canvas
4. Bar view displays message “No chart data available”. Now we need to add some data.

Bar Chart in Chart framework accepts data in form of array of objects BarChartEntry. In each BarChartEntry you can set x — position of the bar that Charts will draw and y — height of the bar.

1. Declare new array of BarChartDataEntry objects
2. Add [BarChartDataEntry] sample data to Bar_Previews. You can add just one bar with x : 1 and y : 1 at the moment.

The next step is inject the data into the chart. For further convenience we will create dedicated method addData that returns BarChartData object.

1. Create addData method
2. Create new BarChartData object inside the method.
3. Create new data set BarChartDataSet using array entries that we have created earlier.
4. Add the data set to data object and complete method with return statement
5. Set chart.data with addData method in makeUIView
6. Resume automatic preview and now you should see one bar in your preview. The bar is as wide as chart and has value 1 as we have set it in Bar_Previews

Next we can add more data to the chart and apply some styling. Charts framework has powerful styling capabilities. More information can be obtained from documentation. The documentation is for Android version of framework called MPAndroidChart but all classes and their properties have similar names.

1. Change data set color to green
2. Change data set label to “My Data”
3. Add more bars in the Bar_previews

Now we can use Bar view in any SwiftUI view. For example we can add it to ContentView

Here is the full version of Bar view code. You can explore it yourself.

In the final version I added one more line to updateUIView method:

uiView.data = addData()

This will enable automatic chart update in case data changes.

}
}