Hello Swift Charts

♪ instrumental hip hop music ♪ ♪ Hello, I am Dominik and I am thrilled to introduce you to Swift Charts, Apple's new framework for making informative and delightful charts in SwiftUI. Data surrounds us and provides an unprecedented resource for understanding the world and making better decisions. Yet, data alone is of little use. To make data useful, we must make sense of it. A well-designed and accessible data visualization can clearly communicate complex data and turn data into understanding and knowledge. At Apple, we spent years studying the best practices for visualizations. We learned that charts work best when they show additional useful context around data like the trends and fluctuations of stock prices over some time range, your heart rate during the last workout, and when the day will cool off in the evening. And these are just some of the many examples across all our platforms where we use charts. Today, I'm excited to introduce you to a new framework so you can make informative and delightful charts in your apps. Say hello to Swift Charts. Swift Charts is a flexible framework for making Apple-designed charts. It uses the same declarative syntax as SwiftUI, so you already know the language of Swift Charts. So today, let's make some informative, accessible, and delightful visualizations with Swift Charts. In the team, we've been helping a pop-up pancake food truck track its sales with an app. The truck serves an international variety of sweet and savory pancakes like cachapa, injera, crêpe, jian bing, dosa, or American pancakes. The food truck served more than 4500 pancakes across these styles in the last 30 days. Cachapa were the most popular and the app already shows the most important information in the title. Let's add a chart to show a detailed breakdown for the six pancakes. To make this visualization in Swift Charts, we can use the same declarative syntax as SwiftUI. In Swift Charts, you build charts by composition. The main components of a bar chart are the bars, which are visual elements for each item in your data. Swift Charts calls these visual elements "marks." Let's jump into Xcode to make this chart. We start with adding a chart. To make a bar, I add a BarMark inside the Chart. To show a bar for the number of cachapas, we have to set the name and the sales.

We set the x-position of the bar to be derived from the value of the name of pancake -- in this case "Cachapa." The first argument to the .value factory method is the description of the value, and the second is the value itself. And now we get a single bar in the preview. The height of each bar described by the y attribute should be set by the number of cachapas sold, which were 916. To indicate that we're not setting the position or height of the bar directly, we use .value. Swift Charts automatically creates not only the bar but also a label for the bars on the x-axis and a y-axis that shows what the length of a bar means. Let's add a second bar for injera, of which the truck sold 850.

Now, it's cool to build individual marks and see them appear in the app. However, we usually want to create a chart driven by a collection such as an array of structs. I'll start by adding a struct for my pancake sales.

It has a name -- which is a string -- and how many pancakes the truck sold -- which is an int. Because we want to use it to repeat, we make it identifiable...

...and define an ID-computed property that returns the name. Now we can create our data set as an array of pancakes. We could load this from an external data source but here we'll define it in the code. Besides cachapa and injera, we also add crêpe. We can make the bar chart data driven with ForEach. First, remove the second bar.

And all we need to do now is to repeat the BarMark with a ForEach.

I pick "element" as the name of the variable in the loop.

Then we can use element.name for x...

...and element.sales for y.

If ForEach is the only content in the chart, we can also put the data directly into the chart initializer.

We can now add the remaining three entries for the jian bing, dosa, and american pancakes.

As we add more entries to the array, we add new bar marks to the chart. Lastly, we see that the labels are becoming close to each other. By swapping x and y, we transpose the chart and give the labels for each bar more space. The Swift Charts framework automatically chooses an appropriate axis style to make your chart beautiful. And with that, we made our first data visualization in Swift Charts. And using the new variant feature in Xcode, we can see that this chart looks beautiful in Dark Mode, adapts to different font sizes, device sizes and orientations, and supports accessibility.

To access the data in a visual representation, you need to be able to see. Swift Charts exposes the data in a visualization to VoiceOver so that everyone can explore the details of the popular pancakes. When I navigate the chart in VoiceOver, it speaks the name and number of pancakes sold. VoiceOver: Cachapa, 916. Injera, 850. Crêpes, 802. Jian Ping, 753. Dosa, 654. American, 618. Dominik: And of course, the chart supports the Audio Graphs feature Apple presented in 2021, including the sonifications. VoiceOver: Describe chart. Chart Details. Play Audio Graph. Complete. Dominik: We just used Swift Charts to add an informative and accessible chart to the food truck app. The chart shows how many pancakes the truck sold of each style. Besides the summaries for each style of pancake, the food truck also has per-day sales data. The truck can park in Cupertino and San Francisco. We want to help the food truck know where to park on different days of the week. To answer this question, let's visualize the data as a time series for our two cities. To see how easy it is to explore different designs, we will make three iterations of the chart. We will start by making a bar graph for Cupertino. Then, we will add the data for San Francisco and add a picker. And finally, we will combine the data into one multiseries line chart. Let's start with the bar chart showing the average number of pancakes sold per day of the week. The sales data has the weekday stored as a date and how many pancakes the truck sold as an integer. The data for Cupertino is in a variable, cupertinoData. As before, we start making a chart with a BarMark. We set the x-position of the bar to be derived from the day of the date...

...and the height to be derived from the sales.

And this gives us a first iteration of a chart that shows the sales data per day of the week for Cupertino. For the second iteration, let's add the data for San Francisco. Using this chart, we want to help the pancake truck decide where to park during the week. The sales data for San Francisco is in the sfData variable. We want to toggle between the two cities and see the bar chart for each city. We start with adding a state variable, city. And then we add a SwiftUI picker for the city to the View.

To toggle between the sales summaries for the two cities via the city variable, we add a switch statement for the data variable.

And all we have to do now is to replace the data for Cupertino with the one that toggles between the two -- Cupertino and San Francisco. If I switch the toggle, the charts toggles between the two cities. Swift Charts works with SwiftUI animations, so if we specify that the transition should be animated with easeInOut, the bars animate as I toggle between the two cities and also only shows one location at a time.

This gives our app the right look and feel. As our final iteration, we will show both series in a line chart. To make this line chart, we start with the bar chart from Cupertino from before. The data for Cupertino and San Francisco is in an array of series. Series structs have the city and sales data. Before we show both series, let's focus on the Cupertino data. In the chart, we can loop over the series data. Remember, the chart initializer acts just like a ForEach.

Then we can replace the specific data for Cupertino with the sales data from the series.

To distinguish the data for the two cities, I want the color of the bars to be derived from the city. For this, we set the foregroundStyle to be derived from the city in the series.

To show what city a color represents, Swift Charts creates a legend below the chart. Now, I add the data for the second location.

As you can see in the preview, Swift Charts automatically chooses a color for San Francisco, and it shows the bars for both cities in the chart. Charts show data for a particular context and a visualization may need to change as our data or questions change. Swift Charts makes it easy to quickly change your chart to explore different designs. The stacked bar chart is great for showing the total average sales per day; but what if I wanted to do a comparison between the two cities? Maybe a point or line chart would be better. We change the mark type from a BarMark to a PointMark to display the pancakes sold as points, or to a LineMark to show the data as a line chart. A line chart is a good fit for the sales data since it lets us compare the two cities in each day of the week. Charts can combine multiple marks. For example, I can add a PointMark.

To make the series differentiable without color, we set the symbol to be derived from the city.

Now each point indicates the city by its color and symbol. Because it is common to show points on a line, Swift Charts has a shorthand for this where we apply the symbol modifier to the LineMark. The style of the points adapts to the line. This chart is great. We can easily compare the sales trends throughout the week. We observe that the sales are especially high in San Francisco on Sundays. Swift Charts made it very easy for us to iterate through many designs in just a few minutes. So to wrap up, let's look at how Swift Charts makes it easy to iterate quickly and at the same time be flexible enough to seamlessly integrate charts into your app's unique style. In Swift Charts, you build charts by composition of marks with mark properties. In the Pancake app, we composed charts with three different marks and four mark properties. For example, we made a simple bar chart as a bar mark with x and y properties. We also changed the mark to quickly explore designs, like charts with points, or line charts where we used the line mark with x and y properties.

We also saw that we can add properties, like Foreground Style, to show multiple series in a line chart. And a chart doesn't have to have just one mark. We combined points and lines, and showed the same value with two mark properties. Swift Charts supports even more marks and mark properties than we used today. It's also extensible and you can add custom marks. Marks and mark properties is what allows Swift Charts to express a wide range of chart designs with a small number of declarative building blocks. There are many ways in which you can combine these building block to create great data visualizations for your apps. Together with what you can already do in SwiftUI, the possibilities are truly endless. And as I've showed you today, you get support for Dark Mode, different device screen sizes, Dynamic Type, VoiceOver, and Audio Graphs for free. In addition, Swift Charts supports High-Contrast mode. And finally, Swift Charts works across locales and is multiplatform. The chart with the same code works across all Apple platforms. And the same customizations work everywhere so you can tailor the chart to each platform. Today, I showed you how Swift Charts uses SwiftUI's powerful compositional syntax so you can make more charts with less code. Swift Charts also provides a rich set of customization options, so you can style the chart to match your application. And now that you know how to chart new territory and make a chart, you can learn how to customize it in the docs and in our follow-up talk where you'll raise the bar. ♪