New in SwiftUI 4: Charts (Bar chart)

Photo by Алекс Арцибашев on Unsplash

With the release of SwiftUI 4, Apple has made it super simple to add charts to your apps. With a simple Charts framework import and a simple API, we get powerful charts out of the box.

Today, we will look at creating a bar chart in SwiftUI 4.

Basic Bar Chart

Let’s start by putting together a simple chart view. We will start by importing Charts framework and creating a Chart view.

Note: Chart is a SwiftUI view that displays a chart

import SwiftUI
import Charts
struct ContentView: View {
    var body: some View {
        Chart {
            // TODO add Marks
        }
    }
}

Adding Bars with BarMark

Inside the chart, we specify the graphical marks that represent data which needs to be plotted. We will start by adding a single BarMark inside our chart.

Note: BarMark represents data using bars. BarMark takes x and y values, these values are PlottableValue types. PlottableValue type conforms to Plottable protocol which is a type that can serve as data for the labeled, plottable values that we can draw on a chart.

We will plot daily workout sessions inside our chart example, so let’s add a BarMark for Monday with time spent on…