Sean Coughlin
Sean Coughlin's Blog

Sean Coughlin's Blog

How to Create Charts on iOS using SwiftUI

Photo by Isaac Smith on Unsplash

How to Create Charts on iOS using SwiftUI

Spruce up your app with Apple's built-in Charts library

Sean Coughlin's photo
Sean Coughlin
·Sep 22, 2022·

2 min read

Subscribe to my newsletter and never miss my upcoming articles

Play this article

Table of contents

  • SwiftUI Natively Supports Charting
  • How to Create a Basic Bar Chart
  • How to Create a Line Graph
  • How to Create a Scatter Plot
  • How to Label Chart Data

SwiftUI Natively Supports Charting

Starting with iOS 16, iPadOS 16, and watchOS 9, SwiftUI supports the native creation of charts. Before those versions were released in 2022, creating a chart required tons of development work or an outside dependency.

Requirements

Creating charts using SwiftUI requires developing an iOS app targeted at iOS 16 and above.

Charts requires a version about iOS 16

Mark Types

Mark types are used to plot data onto charts. Apple defines six mark types.

How to Create a Basic Bar Chart

Every chart starts with a Chart view. The Chart view is the container for the data. Inside the Chart view, you can start providing data using one of Apple's predefined marks.

Chart {
    BarMark(
        x: .value("Type", "Swift"),
        y: .value("Total Count", 5)
    )
    BarMark(
        x: .value("Type", "UI"),
        y: .value("Total Count", 4)
    )
    BarMark(
        x: .value("Type", "Chart"),
        y: .value("Total Count", 3)
    )
 }

A basic SwiftUI bar chart example

A more advanced bar graph example can be found over on my Github.

Created a color SwiftUI bar chart

How to Create a Line Graph

A line graph can be created by using LineMark inside a Chart view.

Chart {
    LineMark(
        x: .value("Type", "Swift"),
        y: .value("Total Count", 5)
    )
    LineMark(
        x: .value("Type", "UI"),
        y: .value("Total Count", 4)
    )
    LineMark(
        x: .value("Type", "Chart"),
        y: .value("Total Count", 3)
    )
 }

Creating a line chart requires using LineMark

How to Create a Scatter Plot

Finally, a scatter graph can be created by using PointMark inside a Chart view.

Chart {
    PointMark(
        x: .value("Type", "Swift"),
        y: .value("Total Count", 5)
    )
    PointMark(
        x: .value("Type", "UI"),
        y: .value("Total Count", 4)
    )
    PointMark(
        x: .value("Type", "Chart"),
        y: .value("Total Count", 3)
    )
 }

image.png

How to Label Chart Data

  • Data can be labeled using a PlottableValue.
    PointMark(
        x: .value("Type", "Swift"),
        y: .value("Total Count", 5)
    ).foregroundStyle(by: .value("Series", "Swift"))
    

Conclusion

SwiftUI Charts is a powerful and easy-to-use option that brings crucial functionality to native support. Try including it in your next app hacking project.

Sources

Did you find this article valuable?

Support Sean Coughlin by becoming a sponsor. Any amount is appreciated!

See recent sponsors Learn more about Hashnode Sponsors
 
Share this