How to Create Charts on iOS using SwiftUI
Tags: ios, mobiledev, swiftui, charting
Published: 2022-09-22 19:53:05

---
title: How to Create Charts on iOS using SwiftUI
published: true
date: 2022-09-22 19:41:05 UTC
tags: #iOS #mobiledev #SwiftUI #charting
canonical_url: https://blog.seancoughlin.me/how-to-create-charts-on-ios-using-swiftui
---

### 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](https://github.com/danielgindi/Charts).

#### Requirements

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

![Charts requires a version about iOS 16](https://cdn.hashnode.com/res/hashnode/image/upload/v1663872946884/n5-YsGxhP.png)

#### Mark Types

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

- [`AreaMark(x: , y: )`](https://developer.apple.com/documentation/charts/areamark)
- [`LineMark(x: , y: )`](https://developer.apple.com/documentation/charts/linemark)
- [`PointMark(x: , y: )`](https://developer.apple.com/documentation/charts/pointmark)
- [`RectangleMark(x: , y: )`](https://developer.apple.com/documentation/charts/rectanglemark)
- [`RuleMark(xStart: , xEnd: , y:)`](https://developer.apple.com/documentation/charts/rulemark)
- [`BarMark(x: , y: )`](https://developer.apple.com/documentation/charts/barmark)

## How to Create a Basic Bar Chart

Every chart starts with a [Chart view](https://developer.apple.com/documentation/charts/chart). 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](https://cdn.hashnode.com/res/hashnode/image/upload/v1663873545920/X8V2H6GkF.png)

A more advanced bar graph example can be found over on [my Github](https://github.com/Scc33/iOS-SwiftUI-chart-example/tree/main).

![Created a color SwiftUI bar chart](https://cdn.hashnode.com/res/hashnode/image/upload/v1663873398167/uxNqxFN1c.png)

## 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](https://cdn.hashnode.com/res/hashnode/image/upload/v1663873704077/XrHCFwzSr.png)

## 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](https://cdn.hashnode.com/res/hashnode/image/upload/v1663873793285/lL1uZRMqC.png)

## How to Label Chart Data

- Data can be labeled using a [PlottableValue](https://developer.apple.com/documentation/charts/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

- [Chart documentation](https://developer.apple.com/documentation/charts)
- [Creating a chart using Swift Charts](https://developer.apple.com/documentation/charts/creating-a-chart-using-swift-charts)