Getting Started with SwiftUI

To begin, open Xcode and initiate a new SwiftUI project. We will define a structure to represent individual bars in our chart, which we’ll refer to as BookStat.

Next, we need to establish a data provider. You can either create a new file or include this within ContentView.swift for simplicity. The structure will resemble the following:

struct BookStat {

var year: Date

var genreCounts: [String: Int]

}

Additionally, we will incorporate a Date extension to facilitate the creation of Date objects based on a specified year.

Building the Bar Chart

With our sample data prepared, we can now visualize the bookData list using a bar chart. The sequence of data entries is not crucial, as Swift Charts will automatically arrange the dates chronologically.

To utilize Swift Charts, ensure you include import Charts in ContentView.swift. Each bar in the chart will be generated using BarMark, which requires both x and y values. In our case, the x-axis will represent the year, while the y-axis will signify the number of books.

To construct the chart, we will use a Chart initializer, supplying it with bookData. For each entry in our bookData, we will create a corresponding BarMark. Your ContentView should ultimately appear somewhat like this:

struct ContentView: View {

var body: some View {

Chart(bookData) { bookStat in

BarMark(

x: .value("Year", bookStat.year),

y: .value("Books", bookStat.genreCounts.values.reduce(0, +))

)

}

}

}

When you run your application or preview it in Xcode, you should see a bar for each year represented in your dataset.

Enhancing the Chart with Stacked Bars

If you wish to differentiate each bar by genre, Swift Charts accommodates this feature. First, we will modify our data model to enable the segregation of book counts by genre. We will introduce a Genre enum and adjust the BookStat structure to include a dictionary of book counts instead of a single integer:

enum Genre {

case fiction, nonFiction, mystery, fantasy

}

struct BookStat {

var year: Date

var genreCounts: [Genre: Int]

}

Next, we can revise our data provider to reflect counts distributed by genre, as shown below:

let bookData = [

BookStat(year: Date(year: 2020), genreCounts: [.fiction: 5, .nonFiction: 3]),

// Add more data entries here

]

Finally, we will modify our chart to create a BarMark for each genre per year, applying the foregroundStyle modifier to color each bar according to its genre.

When you execute the application now, your chart should visually represent the genre distribution as intended.

Customizing Your Chart

To wrap up, we will implement some basic customizations to enhance our chart's presentation. First, we’ll utilize the chartXAxis modifier to ensure that all year labels are visible on the x-axis, depending on the available space. Next, we will label both the x and y axes using chartXAxisLabel and chartYAxisLabel. Lastly, we will reposition the chart legend to the top for improved visibility.

The final chart code will look something like this:

Chart(bookData) { bookStat in

ForEach(bookStat.genreCounts.keys.sorted(), id: .self) { genre in

BarMark(

x: .value("Year", bookStat.year),

y: .value("Books", bookStat.genreCounts[genre] ?? 0)

)

.foregroundStyle(Color(for: genre))

}

}

.chartXAxisLabel("Year")

.chartYAxisLabel("Number of Books")

.chartLegendPosition(.top)

After making these adjustments, run your application one last time...