How to use SwiftUI Charts

The ability to visually present data allows developers to create more intuitive and engaging applications. Swift Charts, a powerful and easy-to-use library, takes data visualization in iOS development to a new level.

Today, we’ll focus on creating a bar chart representing the iPhone’s market share across various regions using SwiftUI and Swift Charts. Here’s a step-by-step guide:

1. Data Definition

In Swift, a struct is a custom data type that allows us to compose several pieces of data together. In this case, the iPhone struct combines the region and shares of the iPhone’s market share in each region.

struct iPhone: Identifiable, Equatable {
    
    let region: String
    let shares: Double
    
    var id: String { region }
    
    ...
    
}

Dummy data for testing

Finally, dummyData is a static array of iPhone instances representing our dataset. ‘Static’ here means that this property belongs to the type itself rather than any one instance of the type. We’re using this array to populate our chart.

struct iPhone: Identifiable, Equatable {
    
   ...
    
    static var dummyData: [iPhone] = [
        .init(region: "Worldwide", shares: 27.6),
        .init(region: "North America", shares: 54.76),
        .init(region: "South America", shares: 14.33),
        .init(region: "Asia", shares: 15.94),
        .init(region: "Europe", shares: 35.84),
        .init(region: "Oceania", shares: 55.55),
        .init(region: "Africa", shares: 14.18),
    ]
    
}

struct BarMarkChart: View {
    
    let data = iPhone.dummyData
    
    var leadingMarket: iPhone? {
        data.max { $0.shares < $1.shares }
    }
    // ...
}

import Charts

struct BarMarkChart: View {
    
    ...
    
    var body: some View {
        Chart {
                ForEach(data) { datum in
                    BarMark(x: .value("iPhone Market Share", datum.shares),
                            y: .value("Region", datum.region))
                    // ...
                }
            }
            
            // ...
    }
}

struct BarMarkChart: View {

    // ...
    
    var body: some View {
        Chart {
            ForEach(data) { datum in
                  BarMark(x: .value("iPhone Market Share", datum.shares),
                          y: .value("Region", datum.region))
                  .foregroundStyle(by: .value("Region", datum.region))
                  .opacity(leadingMarket == datum ? 1 : 0.2)
                  .annotation(position: .overlay) {
                      Text(String(datum.shares) + "%")
                          .font(.caption2)
                          .fontWeight(.semibold)
                  }
              }
          }
      }
}

var body: some View {            
    Chart {
       ForEach(data) { datum in
            // ...
        }
    }
    .chartXAxis(.hidden)
    .chartLegend(.hidden)
    .aspectRatio(contentMode: .fit)
    .padding()

}