# How to display percentage values in SwiftUI

Lately, one user of my mood tracking app [Emo](https://apple.co/3Vh0en4) requested that I add percentage values to my Statistics screen. Since displaying percentage values is a little harder than displaying numbers, I thought I would share a few ways of doing this in this article.

Let's say we have two Doubles and a total value equal to the sum of them.

```swift
let value1: Double = 1
let value2: Double = 2
let total = value1 + value2 // 3
```

## Option 1

Now, if we want to check what percentage of the total is value1 and display this percentage in SwiftUI with 0 fraction digits, we could do something like this:

```swift
Text("\(String(format: "%.0f", (value1 / total * 100)))%")
```

## Option 2

Since iOS 15, there is another way, though, and you may find it more readable:

```swift
Text((value1 / total).formatted(
    .percent.precision(.fractionLength(0)))
)
```

Both options will result in the same text:  
**33% (for value1)  
67% (for value2)**

As you can probably guess, to change the precision to display 2 fraction digits in your percentages, you can modify both versions of the code as follows:

```swift
Text("\(String(format: "%.2f", (value1 / total * 100)))%") // %.2f

Text((value1 / total).formatted(
    .percent.precision(.fractionLength(2))) // fractionLength(2)
)
```

When you display fraction digits, you will notice another difference between both methods. The first one will always display percentage values the same way, as it's a hard-coded format (for example, **33.33%**).

The second one, using the `formatted()` method, takes the user's locale into consideration. So the percentage value may be displayed as 33.33% or 33,33%, depending on the locale. The same applies to other locale-specific rules, like grouping separators (e.g., **"10,000"** in one country and **"10 000"** in another).

This means that the second option is not only more readable but also a better choice if the app is localized, as with the `formatted()` method, all the values will be properly formatted based on the user's locale.

## UPDATE: Option 3

After I published this article, [Łukasz Rutkowski](https://mastodon.world/@luckkerr) reminded me on Mastodon about another similar method (which also formats numbers properly based on locale):

```swift
Text((value1 / total),
    format: .percent.precision(.fractionLength(0))
)
```

If you know another way to display percentages in SwiftUI, feel free to share it in the comments.

## Thank you for reading!

If you want to support my work, please like, comment, share the article and most importantly...

📱Check out my apps on the App Store:  
[https://apps.apple.com/developer/next-planet/id1495155532](https://apps.apple.com/developer/next-planet/id1495155532)

☕ If you like what I do, consider supporting me on Ko-fi! Every little bit means the world!  
[https://ko-fi.com/kslazinski](https://ko-fi.com/kslazinski)

### Credits

Thank you to [Arnaud Joubay](https://x.com/sowenjub) and [Avery Vine](https://mastodon.social/@averyvine) for your input on app localization, and to [Łukasz Rutkowski](https://mastodon.world/@luckkerr) for suggesting Option 3.