<p>At WWDC 2022, Apple unveiled Swift Charts, a library to plot graphs and charts. Until now, we were dealing with 3rd party libraries to plot data.</p>
<p>By using SwiftUI&#8217;s declarative syntax, we can visualize any kind of data with the chart style we want. Swift Charts has a lot of flexibility and allows a wide variety of presentations.</p>
<p>For this article we&#8217;ll follow an iOS project that includes all data visualization types announced by Apple.</p>
<h2>What does Swift Charts offer?</h2>
<p>Before we get down to coding, let’s examine the Charts library. Here is Apple’s definition:</p>
<blockquote><p>Swift Charts is a powerful and concise SwiftUI framework for transforming your data into informative visualizations. With Swift Charts, you can build effective and customizable charts with minimal code. This framework provides marks, scales, axes, and legends as building blocks that you can combine to develop a broad range of data-driven charts.</p></blockquote>
<h3>Mark</h3>
<p>Apple defines items that visually represent data as <strong>Mark</strong>. Available Mark types are: <strong>Bar</strong>, <strong>Point</strong>, <strong>Line</strong>, <strong>Area</strong>, <strong>Rule</strong>, <strong>Rectangle</strong>.</p>
<h3>Scale</h3>
<p>As the name suggests, you can scale variables of your charts using Scales. For example, the x or y axis <strong>range</strong> of the chart, the <strong>colors</strong> of the Marks, the range of the <strong>plot</strong>.</p>
<h2>What Are We Going to Build Today?</h2>
<p>We&#8217;ll create different charts. The finished version of our application will look like this:</p>
<p><img class="alignnone size-full wp-image-2994" src="https://ac.appcircle.io/wp-content/uploads/2022/06/1BraVmtE7Hb-eDNcW-V-QrQ.gif" alt="" width="293" height="633" /></p>
<p>You can <a href="https://github.com/Bugrayenidunya/SwiftCharts">access the source code of the final app here</a>.</p>
<h2>Description of The Project Structure</h2>
<p>As you can imagine, we need a data for all the charts we will create. To meet this need, we created a struct named <strong>ChartData</strong> and created random data using separate computed property variables for each <strong>Mark</strong> type. You can find this struct under the <strong>Data</strong> folder.</p>
<p>Under the <strong>Models</strong> folder, you can find the models we created to manage the data, as you can imagine. These are: EnergyConsumption, HeartBeat, Person, Production and Sale.</p>
<p>Under the <strong>Modules</strong> folder, you will see the <strong>Charts</strong> we created as separate <strong>Views</strong>.</p>
<h2>Line Chart</h2>
<p>We often use the line chart to show data that changes <strong>over time</strong> and to be able to clearly display the change between them.</p>
<p>We used the line chart to show the number of sales made by a seller by day.</p>
<h3>Code:</h3>
<pre data-label="LineChart.swift"><code class="language-swift">import SwiftUI
import Charts

// MARK: - View
struct LineChartView: View {
    
    // MARK: Properties
    private let chartData = ChartData.lineChartData
    
    // MARK: Body
    var body: some View {
        VStack {
            GroupBox(&quot;Sales Count Per Day&quot;) {
                Chart(chartData) { sale in
                    LineMark(
                        x: .value(&quot;Weekday&quot;, sale.date, unit: .hour),
                        y: .value(&quot;Count&quot;, sale.count)
                    )
                    .interpolationMethod(.cardinal)
                }
                .padding(.horizontal, 16)
            }
            .backgroundStyle(Color.white)
        }
        .navigationTitle(&quot;Line Chart&quot;)
    }
}

// MARK: - Preview
struct LineChartView_Previews: PreviewProvider {
    static var previews: some View {
        LineChartView()
    }
}</code></pre>
<h3>Output:</h3>
<p><img class="alignnone size-full wp-image-2993" src="https://ac.appcircle.io/wp-content/uploads/2022/06/1xdecFwzH5FL_noQi7P5oWg.png" alt="" width="293" height="633" srcset="https://ac.appcircle.io/wp-content/uploads/2022/06/1xdecFwzH5FL_noQi7P5oWg.png 293w, https://ac.appcircle.io/wp-content/uploads/2022/06/1xdecFwzH5FL_noQi7P5oWg-139x300.png 139w" sizes="(max-width: 293px) 100vw, 293px" /></p>
<h2>Area Chart</h2>
<p>Area Chart basically represents the combined version of <strong class="jk im">line</strong> chart and <strong>bar</strong> chart. Usually, we use it to show the cumulative sum of one or more numeric values based on a second variable.</p>
<p>In our project, we used the area chart to show the annual energy consumption increase.</p>
<h3>Code:</h3>
<pre data-label="AreaChart.swift"><code class="language-swift">import SwiftUI
import Charts

// MARK: - View
struct AreaChartView: View {
    // MARK: Properties
    private let chartData = ChartData.areaChartData
    
    // MARK: Body
    var body: some View {
        VStack {
            GroupBox(&quot;Yearly Energy Consumption&quot;) {
                Chart(chartData) { consumption in
                    AreaMark(
                        x: .value(&quot;&quot;, consumption.date, unit: .month),
                        yStart: .value(&quot;&quot;, consumption.monthlyMinMegawatt),
                        yEnd: .value(&quot;&quot;, consumption.monthlyMaxMegawatt)
                    )
                }
                .padding(.horizontal)
            }
            .backgroundStyle(Color.white)
        }
        .navigationTitle(&quot;Area Chart&quot;)
    }
}

// MARK: - Preview
struct AreaChartView_Previews: PreviewProvider {
    static var previews: some View {
        AreaChartView()
    }
}</code></pre>
<h3>Output:</h3>
<p><img class="alignnone size-full wp-image-2996" src="https://ac.appcircle.io/wp-content/uploads/2022/06/1GdskQFWm-DhVxqSpoTxsAQ.png" alt="" width="293" height="633" srcset="https://ac.appcircle.io/wp-content/uploads/2022/06/1GdskQFWm-DhVxqSpoTxsAQ.png 293w, https://ac.appcircle.io/wp-content/uploads/2022/06/1GdskQFWm-DhVxqSpoTxsAQ-139x300.png 139w" sizes="(max-width: 293px) 100vw, 293px" /></p>
<h2>Bar Chart</h2>
<p>Bar Chart is preferred for visualizing numeric values as bars divided into <strong>categories</strong>.</p>
<p>In our project, we visualized the <strong class="jk im">bus production</strong> by month with the help of Bar Chart.</p>
<h3>Code:</h3>
<pre data-label="BarChart.swift"><code class="language-swift">import SwiftUI
import Charts

// MARK: - View
struct BarChartView: View {
    // MARK: Properties
    private let chartData = ChartData.barChartData
    
    // MARK: Body
    var body: some View {
        VStack {
            GroupBox(&quot;Number of Bus Production by Month&quot;) {
                Chart(chartData) { production in
                    BarMark(
                        x: .value(&quot;Bus Production&quot;, production.count),
                        y: .value(&quot;Month&quot;, production.date, unit: .month)
                    )
                    .foregroundStyle(by: .value(&quot;Bus Production&quot;, production.count))
                }
                .padding(.horizontal, 16)
            }
            .backgroundStyle(Color.white)
        }
        .navigationTitle(&quot;Bar Chart&quot;)
    }
}

// MARK: - Preview
struct BarChartView_Previews: PreviewProvider {
    static var previews: some View {
        BarChartView()
    }
}</code></pre>
<h3>Output:</h3>
<p><img class="alignnone size-full wp-image-2998" src="https://ac.appcircle.io/wp-content/uploads/2022/06/1BTMDA9lPYbJS5X4DDVXrgQ.png" alt="" width="293" height="633" srcset="https://ac.appcircle.io/wp-content/uploads/2022/06/1BTMDA9lPYbJS5X4DDVXrgQ.png 293w, https://ac.appcircle.io/wp-content/uploads/2022/06/1BTMDA9lPYbJS5X4DDVXrgQ-139x300.png 139w" sizes="(max-width: 293px) 100vw, 293px" /></p>
<h2>Point Chart</h2>
<p>Another chart type we use to visualize <strong class="jk im">time-varying</strong> values and <strong>data groups</strong> is Point Chart.</p>
<p>We used the Point Chart to visualize <strong>heart rate</strong> data, as Apple prefers in the Health app.</p>
<h3>Code:</h3>
<pre data-label="PointChart.swift"><code class="language-swift">import SwiftUI
import Charts

// MARK: - View
struct PointChartView: View {
    
    // MARK: Properties
    private let chartData = ChartData.pointChartData
    
    // MARK: Body
    var body: some View {
        VStack {
            GroupBox(&quot;Heart Beats by Time&quot;) {
                Chart(chartData) { person in
                    PointMark(
                        x: .value(&quot;Time&quot;, person.heartBeat.time, unit: .minute),
                        y: .value(&quot;Heart Beat&quot;, person.heartBeat.beat)
                    )
                    .foregroundStyle(by: .value(&quot;Heart Beat&quot;, person.heartBeat.beat))
                }
                .padding(.horizontal, 16)
            }
            .backgroundStyle(Color.white)
        }
        .navigationTitle(&quot;Point Chart&quot;)
    }
}

// MARK: - Preview
struct PointChartView_Previews: PreviewProvider {
    static var previews: some View {
        PointChartView()
    }
}</code></pre>
<h3>Output:</h3>
<p><img class="alignnone size-full wp-image-2999" src="https://ac.appcircle.io/wp-content/uploads/2022/06/1bLC5egkCOgvnjU3Qt_UrrQ.png" alt="" width="293" height="633" srcset="https://ac.appcircle.io/wp-content/uploads/2022/06/1bLC5egkCOgvnjU3Qt_UrrQ.png 293w, https://ac.appcircle.io/wp-content/uploads/2022/06/1bLC5egkCOgvnjU3Qt_UrrQ-139x300.png 139w" sizes="(max-width: 293px) 100vw, 293px" /></p>
<h2>Bonus: Mixed Chart</h2>
<p>As a bonus, we combined line chart and point chart data in one chart. <strong class="jk im">Swift Charts</strong> gives us this convenience in every chart. You can also experiment with different types of graphic creation combinations yourself.</p>
<h3>Code:</h3>
<pre data-label="MixedChart.swift"><code class="language-swift">import SwiftUI
import Charts

// MARK: - View
struct MixedChartView: View {
    
    // MARK: Properties
    private let lineChartData = ChartData.lineChartData
    private let pointChartData = ChartData.pointChartData
    
    // MARK: Body
    var body: some View {
        VStack {
            GroupBox(&quot;Mixed: Sales Count &amp; Heart Beat&quot;) {
                Chart {
                    ForEach(lineChartData) { sale in
                        LineMark(
                            x: .value(&quot;Weekday&quot;, sale.date, unit: .minute),
                            y: .value(&quot;Count&quot;, sale.count)
                        )
                        .interpolationMethod(.cardinal)
                    }
                    .foregroundStyle(.green)
                    
                    ForEach(pointChartData) { person in
                        PointMark(
                            x: .value(&quot;Time&quot;, person.heartBeat.time, unit: .minute),
                            y: .value(&quot;Heart Beat&quot;, person.heartBeat.beat)
                        )
                        .foregroundStyle(by: .value(&quot;Heart Beat&quot;, person.heartBeat.beat))
                    }
                    
                }
                .padding(.horizontal, 16)
            }
            .backgroundStyle(Color.white)
        }
        .navigationTitle(&quot;Mixed Chart&quot;)
    }
}

// MARK: - Preview
struct MixedChartView_Previews: PreviewProvider {
    static var previews: some View {
        MixedChartView()
    }
}</code></pre>
<h3>Output:</h3>
<p><img class="alignnone size-full wp-image-3000" src="https://ac.appcircle.io/wp-content/uploads/2022/06/1IlZnQ4l22GDsj10qpTg7Cw.png" alt="" width="293" height="633" srcset="https://ac.appcircle.io/wp-content/uploads/2022/06/1IlZnQ4l22GDsj10qpTg7Cw.png 293w, https://ac.appcircle.io/wp-content/uploads/2022/06/1IlZnQ4l22GDsj10qpTg7Cw-139x300.png 139w" sizes="(max-width: 293px) 100vw, 293px" /></p>
<h2>Properties</h2>
<p>Now I’m going to show you briefly some of the <strong class="jk im">Properties</strong>. You can make changes to your charts by using these properties.</p>
<h3>X &amp; Y Position</h3>
<p>Actually, we have already used X and Y posts in our <strong class="jk im">Marks</strong>. They exist to define our dataset to be located on the X and Y axes.</p>
<h3>Foreground Style</h3>
<p>We use Foreground Style for options such as <strong>coloring</strong> and <strong>grouping</strong> our data. You can see these two options in different Charts within the project. The <strong>MixedChart</strong> we created would be a good example of this.</p>
<h3>Symbol</h3>
<p>As the name suggests, we can use Symbol to mark the intersecting points on the X and Y axes in our graphics with different symbols. Thus, you get a graphic that is easy to distinguish.</p>
<p>The chart below is an example of how we can diversify our chart with the <strong>Square</strong>and <strong>Circle</strong> symbols. Moreover, the Charts library does this for us automatically.</p>
<p><img class="alignnone size-full wp-image-3001" src="https://ac.appcircle.io/wp-content/uploads/2022/06/1AvMzb5i8Q1ehqTgNokgbjQ.png" alt="" width="660" height="443" srcset="https://ac.appcircle.io/wp-content/uploads/2022/06/1AvMzb5i8Q1ehqTgNokgbjQ.png 660w, https://ac.appcircle.io/wp-content/uploads/2022/06/1AvMzb5i8Q1ehqTgNokgbjQ-300x201.png 300w" sizes="(max-width: 660px) 100vw, 660px" /></p>
<h2>Line Style</h2>
<p>It is used to create new and custom <strong>plots</strong> for the <strong class="jk im">Marks</strong> used in our chart. For example, to create <strong>bolder</strong> and <strong>rounded</strong> lines.</p>
<h2>Conclusion</h2>
<p>As you can see, using a few different modifiers, we can quickly create many different kinds of graphics without much effort.</p>
<p>Of course, these are not the only things we can do with <strong>Swift Charts</strong>. Apple has released many video series for us. You can learn how to create Charts in different structures by watching these videos.</p>
<h2>Where to Go From Here?</h2>
<p><a class="au my" href="https://developer.apple.com/documentation/Charts" target="_blank" rel="noopener nofollow">Apple Docs — Swift Charts</a></p>
<p><a class="au my" href="https://developer.apple.com/videos/play/wwdc2022/10136/" target="_blank" rel="noopener nofollow">Hello Swift Charts — WWDC22</a></p>
<p><a class="au my" href="https://developer.apple.com/videos/play/wwdc2022/110340" target="_blank" rel="noopener nofollow">Design an Effective Chart — WWDC22</a></p>
<p><a class="au my" href="https://developer.apple.com/videos/play/wwdc2022/110342" target="_blank" rel="noopener nofollow">Design App Experiences With Charts — WWDC22</a></p>
<p><a class="au my" href="https://developer.apple.com/videos/play/wwdc2022/10137" target="_blank" rel="noopener nofollow">Swift Charts: Raise The Bar — WWDC22</a></p>


WWDC22

Developing with Live Activities API in iOS 16

Swift Charts with SwiftUI – WWDC22

Using SwiftUI inside UICollectionView and UITableView

UIKit got a lot of cool new features at WWDC22. Here's the new features added to UIKit with iOS 16 and how to use them with code samples.

Swift Charts with SwiftUI – WWDC22

Related Posts

Speed Up your Release Process with Appcircle’s Azure Bot for SwiftLint and Detekt

WWDC23: Meet mergeable libraries

WWDC23: Meet Push Notifications Console

WWDC23: Meet SwiftData

Swift Charts with SwiftUI – WWDC22

Related Posts

Subscribe to Appcircle Circle