{"id":709,"date":"2023-05-02T01:48:47","date_gmt":"2023-05-01T23:48:47","guid":{"rendered":"https:\/\/mic.st\/blog\/?p=709"},"modified":"2024-02-10T20:50:09","modified_gmt":"2024-02-10T19:50:09","slug":"draw-line-graphs-in-swiftui","status":"publish","type":"post","link":"https:\/\/mic.st\/blog\/draw-line-graphs-in-swiftui\/","title":{"rendered":"Draw line graphs and charts in SwiftUI"},"content":{"rendered":"\n

Graphs and charts are an essential tool for visualizing data, and with SwiftUI, it’s easy to create custom and interactive graphs (Spoiler:<\/em> we won’t add any interactivity during this arcticle). You can use them in iOS, iPadOS, and macOS apps. In this article, we’ll explore how to draw a line graph in SwiftUI. In a follow up article I will show you how to draw bar graphs in SwiftUI.<\/p>\n\n\n\n

See my earlier article if you want to draw graphs in Swift: https:\/\/mic.st\/blog\/draw-graphs-easily-with-carekits-ockcartesianchartview\/<\/a><\/p>\n\n\n\n

Let’s start with a really quick recap as you might still be pretty new to SwiftUI.<\/p>\n\n\n\n

Update: Native API for iOS 16.0+<\/h2>\n\n\n\n

The following article is about building a view for showing graphs on your own.<\/p>\n\n\n\n

There is also Apple’s own native framework for drawing graphs in SwiftUI that you can use starting iOS 16.0+.<\/p>\n\n\n\n

If possible, you should use this native API<\/strong>, see: https:\/\/developer.apple.com\/documentation\/charts<\/a><\/p>\n\n\n\n

Thanks @Jem for leaving a comment about that!<\/em><\/p>\n\n\n\n

SwiftUI project Setup<\/h2>\n\n\n\n

Let’s take a quick moment to recap on SwiftUI. As you may know, SwiftUI is a modern UI framework that uses a declarative syntax to create user interfaces. For starters, it has way less boilerplate compared to defining UIs or views in general using Swift alone. However, the syntax can look a little strange if you are coming from Swift.<\/p>\n\n\n\n

To create a new SwiftUI project, launch Xcode and select “File” > “New” > “Project.” In the “Create a new Xcode project” window, select “App” and click “Next.” Then, choose “SwiftUI” as the user interface and give your project a name. Finally, select the directory where you want to save your project and click “Create.”<\/p>\n\n\n\n

Alright, now we are ready to go! You should see a new Xcode project where you land in a file called “ContentView.swift”. On the right side there should be your preview of this rendered ContentView<\/code>.<\/p>\n\n\n\n

The classic “Hello, World!” content looks like this:<\/p>\n\n\n

struct<\/span> ContentView<\/span>: View<\/span> <\/span>{\n    var<\/span> body: some View<\/span> {\n        VStack<\/span> {\n            Image<\/span>(systemName: \"globe\"<\/span>)\n                .imageScale(.large)\n                .foregroundColor(.accentColor)\n            Text<\/span>(\"Hello, world!\"<\/span>)\n        }\n        .padding()\n    }\n}\n\nstruct<\/span> ContentView_Previews<\/span>: PreviewProvider<\/span> <\/span>{\n    static<\/span> var<\/span> previews: some View<\/span> {\n        ContentView<\/span>()\n    }\n}<\/code><\/span>Code language:<\/span> Swift<\/span> (<\/span>swift<\/span>)<\/span><\/small><\/pre>\n\n\n
If you never did any SwiftUI before, I can highly recommend to just play a little bit around with this piece of code. Just add any view modifiers and see what happens.<\/p>\n\n\n\n
Draw a Line Graph in SwiftUI<\/h2>\n\n\n\n
Now that we have our little project set up, let’s start by draw the line graph itself. As you probably know, a line graph is a simple type of graph that displays data as a series of points connected by straight lines. We could later add some rounding \/ interpolating to make it look “nicer” but let’s start easy first.<\/p>\n\n\n\n
Our goal is to pass some data that represents X and Y coordinates to some custom View<\/code> and this View<\/code> should render our data. To make things easier, the view should scale itself accordingly to the minimum and maximum values. The origin of the graph should be at the bottom-left corner.<\/p>\n\n\n\n
E.g. the data might look like this:<\/p>\n\n\n
let<\/span> data:[(Double<\/span>, Double<\/span>)] = [(0<\/span>, 0<\/span>), (1<\/span>, 5<\/span>), (2<\/span>, 3<\/span>), (3<\/span>, 8<\/span>), (4<\/span>, 4<\/span>), (5<\/span>, 6<\/span>), (6<\/span>, 1<\/span>)]<\/code><\/span>Code language:<\/span> Swift<\/span> (<\/span>swift<\/span>)<\/span><\/small><\/pre>\n\n\n
This data set represents seven points with the x-values ranging from 0 to 6 and the y-values ranging from 0 to 8.<\/p>\n\n\n\n
In the following sections I will start with the code followed by a small explanation what happens. The great thing about SwiftUI is that you can quickly play around with it. That means whenever you need to re-draw your line graph in SwiftUI you do not need to re-build. Xcode does instantly render your view in the preview.<\/p>\n\n\n\n
Eventually we want to have a custom View<\/code> that we can call like this:<\/p>\n\n\n
import<\/span> SwiftUI\n\nstruct<\/span> ContentView<\/span>: View<\/span> <\/span>{\n  let<\/span> data:[(Double<\/span>, Double<\/span>)] = [(0<\/span>, 0<\/span>), (1<\/span>, 5<\/span>), (2<\/span>, 3<\/span>), (3<\/span>, 8<\/span>), (4<\/span>, 4<\/span>), (5<\/span>, 6<\/span>), (6<\/span>, 1<\/span>)]\n\n  var<\/span> body: some View<\/span> {\n    LineGraphView<\/span>(data: data)\n  }\n}\n\nstruct<\/span> ContentView_Previews<\/span>: PreviewProvider<\/span> <\/span>{\n  static<\/span> var<\/span> previews: some View<\/span> {\n    ContentView<\/span>()\n  }\n}<\/code><\/span>Code language:<\/span> Swift<\/span> (<\/span>swift<\/span>)<\/span><\/small><\/pre>\n\n\n
Drawing the data<\/h2>\n\n\n\n
Let’s start with the code for drawing the line itself.<\/p>\n\n\n
struct<\/span> LineGraphView<\/span>: View<\/span> <\/span>{\n  let<\/span> data: [(Double<\/span>, Double<\/span>)]\n  var<\/span> body: some View<\/span> {\n    GeometryReader<\/span> { geometry in<\/span>\n      Path<\/span> { path in<\/span>\n        let<\/span> xScale = geometry.size.width \/ CGFloat<\/span>(data.count<\/span> - 1<\/span>)\n        let<\/span> yScale = geometry.size.height \/ CGFloat<\/span>(data.max<\/span> { $0.1<\/span> < $1.1<\/span> }?.1<\/span> ?? 1<\/span>)\n        path.move(to: .init<\/span>(x: 0<\/span>, y: geometry.size.height - CGFloat<\/span>(data[0<\/span>].1<\/span>) * yScale))\n        for<\/span> i in<\/span> 1<\/span>..<data.count<\/span> {\n          path.addLine(to: .init<\/span>(x: CGFloat<\/span>(i) * xScale, y: geometry.size.height - CGFloat<\/span>(data[i].1<\/span>) * yScale))\n        }\n      }\n      .stroke(Color<\/span>.blue, lineWidth: 2<\/span>)\n    }\n  }\n}<\/code><\/span>Code language:<\/span> Swift<\/span> (<\/span>swift<\/span>)<\/span><\/small><\/pre>\n\n\n
Alright, let’s break down this code snippet! We start with a GeometryReader<\/code>, which gives us access to the size of the view it’s contained in. <\/p>\n\n\n\n
Next, we create a Path<\/code> and start drawing the line using move(to:)<\/code> to move the drawing cursor to the first point of our data. Then, we loop through the data and draw a line to each subsequent point using addLine(to:)<\/code>.<\/p>\n\n\n\n
We calculate the scaling factors for the x and y axes by dividing the view size by the number of data points and the maximum data value, respectively. Finally, we stroke the path with a blue color and a line width of 2 points. And voila, we have ourselves a beautiful line graph!<\/p>\n\n\n
\n
\"Line
Line graph for seven data points drawn by SwiftUI.<\/figcaption><\/figure>\n<\/div>\n\n\n
Axis and ticks<\/h2>\n\n\n\n
However, what is not so beautiful are the missing axis and ticks on the axis to indicate the data point values. To draw the line graph in SwiftUI was rather easy. Adding ticks involves some more thinking for making it perfect. For simplicity we just want to have a tick for every full value. In the conclusion section there is an example showing that this does not always works really great.<\/p>\n\n\n\n
Add the following code into you GeometryReader<\/code> block for adding axis and ticks.<\/p>\n\n\n
\/\/ x-axis<\/span>\nPath<\/span> { path in<\/span>\n  let<\/span> xScale = geometry.size.width \/ CGFloat<\/span>(data.count<\/span> - 1<\/span>)\n  let<\/span> y = geometry.size.height\n  path.move(to: .init<\/span>(x: 0<\/span>, y: y))\n  path.addLine(to: .init<\/span>(x: geometry.size.width, y: y))\n\n  let<\/span> tickSpacing = 1<\/span>\n  for<\/span> i in<\/span> 0<\/span>..<(data.count<\/span> - 1<\/span>) {\n    let<\/span> tickX = CGFloat<\/span>(i * tickSpacing) * xScale\n    guard<\/span> tickX < geometry.size.width else<\/span> { break<\/span> }\n    path.move(to: .init<\/span>(x: tickX, y: y - 5<\/span>))\n    path.addLine(to: .init<\/span>(x: tickX, y: y + 5<\/span>))\n  }\n}\n.stroke(Color<\/span>.red, lineWidth: 5<\/span>)\n\n\/\/ y-axis<\/span>\nPath<\/span> { path in<\/span>\n  let<\/span> x: CGFloat<\/span> = 0<\/span>\n  let<\/span> yScale: CGFloat<\/span> = geometry.size.height \/ CGFloat<\/span>(data.max<\/span> { $0.1<\/span> < $1.1<\/span> }?.1<\/span> ?? 1<\/span>)\n  path.move(to: .init<\/span>(x: x, y: 0<\/span>))\n  path.addLine(to: .init<\/span>(x: x, y: geometry.size.height))\n\n  let<\/span> tickSpacing: CGFloat<\/span> = 1<\/span>\n  for<\/span> i in<\/span> 0<\/span>..<Int<\/span>(data.max<\/span> { $0.1<\/span> < $1.1<\/span> }!.1<\/span>) {\n    let<\/span> tickY = CGFloat<\/span>(i) * tickSpacing * yScale\n    path.move(to: .init<\/span>(x: x - 5<\/span>, y: geometry.size.height - tickY))\n    path.addLine(to: .init<\/span>(x: x + 5<\/span>, y: geometry.size.height - tickY))\n  }\n}\n.stroke(Color<\/span>.red, lineWidth: 5<\/span>)<\/code><\/span>Code language:<\/span> Swift<\/span> (<\/span>swift<\/span>)<\/span><\/small><\/pre>\n\n\n
OK, what happens here?<\/p>\n\n\n\n
The first block of code creates the x-axis. It starts by defining a Path<\/code> and then setting the starting point at the bottom-left corner of the chart. The x-axis is drawn using the addLine<\/code> method, which creates a line from the starting point to the right-most point of the chart. The tickSpacing<\/code> variable is used to determine the space between each tick on the x-axis. The loop iterates over the data set. Inside of it we draws tick marks at the specified intervals along the X-axis.<\/p>\n\n\n\n
The second block of code creates the y-axis. It looks quite similar to the first one. However, for calculating the yScale<\/code> we need to find the maximum Y value of the data set.<\/p>\n\n\n\n
Finally, both the x and y axis are drawn using the stroke<\/code> method. This uses the specified color and line width for drawing the path.<\/p>\n\n\n\n
For our simple example, we chose a fixed tickSpacing<\/code>  value of 1 so that you can easily read our small number of data points. You might need to change this logic if you want to render larger data sets.<\/p>\n\n\n
\n
\"Line
Our line graph with added axis<\/figcaption><\/figure>\n<\/div>\n\n\n
Add some labels<\/h2>\n\n\n\n
Still our graph looks a little bit empty.You do not really get an idea of the dimensions. So let’s add some labels on our ticks. For simplicity, we just add on every tick a label of the tick’s value. Depending on your expected data you might change the logic here a little bit as well.<\/p>\n\n\n\n
You can add the following code also inside of your GeometryReader<\/code><\/code> block.<\/p>\n\n\n
\/\/ add x-axis tick labels<\/span>\nForEach<\/span>(1<\/span>..<(data.count<\/span> - 1<\/span>), id: \\.self<\/span>) { i in<\/span>\n  let<\/span> tickLabel = Text<\/span>(\"\\(i)\"<\/span>)\n    .frame(width: 16<\/span>, height: 16<\/span>, alignment: .center)\n  let<\/span> tickX = CGFloat<\/span>(i) * geometry.size.width \/ CGFloat<\/span>(data.count<\/span> - 1<\/span>)\n  tickLabel\n    .position(x: tickX, y: geometry.size.height - 16<\/span>)\n}\n\n\/\/ add y-axis tick labels<\/span>\nForEach<\/span>(1<\/span>..<Int<\/span>(data.max<\/span> { $0.1<\/span> < $1.1<\/span> }!.1<\/span>), id: \\.self<\/span>) { i in<\/span>\n  let<\/span> tickLabel = Text<\/span>(\"\\(i)\"<\/span>)\n    .frame(width: 16<\/span>, height: 16<\/span>, alignment: .center)\n  let<\/span> tickY = CGFloat<\/span>(i) * geometry.size.height \/ CGFloat<\/span>(data.max<\/span> { $0.1<\/span> < $1.1<\/span> }!.1<\/span>)\n  tickLabel\n    .position(x: 16<\/span> - 5<\/span>, y: geometry.size.height - tickY)\n}<\/code><\/span>Code language:<\/span> Swift<\/span> (<\/span>swift<\/span>)<\/span><\/small><\/pre>\n\n\n
We basically loop over the same ranges we had before. I did set the label’s frame to a fixed size so that their position is easier to calculate.<\/p>\n\n\n
\n
\"Line
Our final simple line graph with ticks and labels.<\/figcaption><\/figure>\n<\/div>\n\n\n
Conclusion<\/h2>\n\n\n\n
We did just draw a simple line graph in SwiftUI by using a relatively simple custom view. This handles scaling and adding of axis, ticks and labels completely on it’s own. If you add more data than the example of just seven values it will automatically scale itself.<\/p>\n\n\n\n
From this solution you can easily iterate now. E.g. add support for larger datasets, add animations, more labels, legends, lines, animations, etc.<\/p>\n\n\n\n
First thing you will quickly see, is that the given first draft will not look that great for large data sets.<\/p>\n\n\n\n
For example given this data:<\/p>\n\n\n
struct<\/span> ContentView<\/span>: View<\/span> <\/span>{\n  let<\/span> data:[(Double<\/span>, Double<\/span>)] = [(0<\/span>, 0<\/span>), (1<\/span>, 5<\/span>), (2<\/span>, 3<\/span>), (3<\/span>, 30<\/span>), (4<\/span>, 4<\/span>), (5<\/span>, 6<\/span>), (6<\/span>, 1<\/span>), (7<\/span>, 4<\/span>), (8<\/span>, 6<\/span>), (9<\/span>, 1<\/span>)]\n\n  var<\/span> body: some View<\/span> {\n    LineGraphView<\/span>(data: data)\n  }\n}<\/code><\/span>Code language:<\/span> Swift<\/span> (<\/span>swift<\/span>)<\/span><\/small><\/pre>\n\n\n
You get the following output:<\/p>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
As you can see, what I mentioned earlier comes into effect here: Because we did just add ticks and labels for every value, the Y axis looks a little bit crowded. You can fix this by adding an additional parameter (e.g. for removing every n-th tick) or you change the logic so that it automatically hides some based on your needs (e.g. based on the view’s available size).<\/p>\n\n\n\n
However, I will leave that up to you now \ud83d\ude42 Happy experimenting!<\/p>\n\n\n\n
Full Code example<\/h2>\n\n\n\n
ContentView.swift<\/p>\n\n\n
\/\/<\/span>\n\/\/  ContentView.swift<\/span>\n\/\/  TestGraph<\/span>\n\/\/<\/span>\n\/\/  Created by Michael Steudter on 01.05.23.<\/span>\n\/\/<\/span>\n\nimport<\/span> SwiftUI\n\nstruct<\/span> ContentView<\/span>: View<\/span> <\/span>{\n  let<\/span> data:[(Double<\/span>, Double<\/span>)] = [(0<\/span>, 0<\/span>), (1<\/span>, 5<\/span>), (2<\/span>, 3<\/span>), (3<\/span>, 30<\/span>), (4<\/span>, 4<\/span>), (5<\/span>, 6<\/span>), (6<\/span>, 1<\/span>), (7<\/span>, 4<\/span>), (8<\/span>, 6<\/span>), (9<\/span>, 1<\/span>)]\n\t\n  var<\/span> body: some View<\/span> {\n    LineGraphView<\/span>(data: data)\n  }\n}\n\nstruct<\/span> ContentView_Previews<\/span>: PreviewProvider<\/span> <\/span>{\n  static<\/span> var<\/span> previews: some View<\/span> {\n    ContentView<\/span>()\n  }\n}\n<\/code><\/span>Code language:<\/span> Swift<\/span> (<\/span>swift<\/span>)<\/span><\/small><\/pre>\n\n\n
LineGraphView.swift<\/p>\n\n\n
\/\/<\/span>\n\/\/  LineGraphView.swift<\/span>\n\/\/  TestGraph<\/span>\n\/\/<\/span>\n\/\/  Created by Michael Steudter on 01.05.23.<\/span>\n\/\/<\/span>\n\nimport<\/span> SwiftUI\n\nstruct<\/span> LineGraphView<\/span>: View<\/span> <\/span>{\n  let<\/span> data: [(Double<\/span>, Double<\/span>)]\n  \n  var<\/span> body: some View<\/span> {\n    ZStack<\/span> {\n      GeometryReader<\/span> { geometry in<\/span>\n        Path<\/span> { path in<\/span>\n          let<\/span> xScale = geometry.size.width \/ CGFloat<\/span>(data.count<\/span> - 1<\/span>)\n          let<\/span> yScale = geometry.size.height \/ CGFloat<\/span>(data.max<\/span> { $0.1<\/span> < $1.1<\/span> }?.1<\/span> ?? 1<\/span>)\n          path.move(to: .init<\/span>(x: 0<\/span>, y: geometry.size.height - CGFloat<\/span>(data[0<\/span>].1<\/span>) * yScale))\n          for<\/span> i in<\/span> 1<\/span>..<data.count<\/span> {\n            path.addLine(to: .init<\/span>(x: CGFloat<\/span>(i) * xScale, y: geometry.size.height - CGFloat<\/span>(data[i].1<\/span>) * yScale))\n          }\n        }\n        .stroke(Color<\/span>.blue, lineWidth: 2<\/span>)\n        \n        \/\/\t\t\t\t\/\/ x-axis<\/span>\n        Path<\/span> { path in<\/span>\n          let<\/span> xScale = geometry.size.width \/ CGFloat<\/span>(data.count<\/span> - 1<\/span>)\n          let<\/span> y = geometry.size.height\n          path.move(to: .init<\/span>(x: 0<\/span>, y: y))\n          path.addLine(to: .init<\/span>(x: geometry.size.width, y: y))\n          \n          let<\/span> tickSpacing = 1<\/span>\n          for<\/span> i in<\/span> 0<\/span>..<(data.count<\/span> - 1<\/span>) {\n            let<\/span> tickX = CGFloat<\/span>(i * tickSpacing) * xScale\n            guard<\/span> tickX < geometry.size.width else<\/span> { break<\/span> }\n            path.move(to: .init<\/span>(x: tickX, y: y - 5<\/span>))\n            path.addLine(to: .init<\/span>(x: tickX, y: y + 5<\/span>))\n          }\n        }\n        .stroke(Color<\/span>.red, lineWidth: 5<\/span>)\n        \/\/<\/span>\n        \/\/ y-axis<\/span>\n        Path<\/span> { path in<\/span>\n          let<\/span> x: CGFloat<\/span> = 0<\/span>\n          let<\/span> yScale: CGFloat<\/span> = geometry.size.height \/ CGFloat<\/span>(data.max<\/span> { $0.1<\/span> < $1.1<\/span> }?.1<\/span> ?? 1<\/span>)\n          path.move(to: .init<\/span>(x: x, y: 0<\/span>))\n          path.addLine(to: .init<\/span>(x: x, y: geometry.size.height))\n          \n          let<\/span> tickSpacing: CGFloat<\/span> = 1<\/span>\n          for<\/span> i in<\/span> 0<\/span>..<Int<\/span>(data.max<\/span> { $0.1<\/span> < $1.1<\/span> }!.1<\/span>) {\n            let<\/span> tickY = CGFloat<\/span>(i) * tickSpacing * yScale\n            path.move(to: .init<\/span>(x: x - 5<\/span>, y: geometry.size.height - tickY))\n            path.addLine(to: .init<\/span>(x: x + 5<\/span>, y: geometry.size.height - tickY))\n          }\n        }\n        .stroke(Color<\/span>.red, lineWidth: 5<\/span>)\n        \n        \/\/ add x-axis tick labels<\/span>\n        ForEach<\/span>(1<\/span>..<(data.count<\/span> - 1<\/span>), id: \\.self<\/span>) { i in<\/span>\n          let<\/span> tickLabel = Text<\/span>(\"\\(i)\"<\/span>)\n            .frame(width: 16<\/span>, height: 16<\/span>, alignment: .center)\n          let<\/span> tickX = CGFloat<\/span>(i) * geometry.size.width \/ CGFloat<\/span>(data.count<\/span> - 1<\/span>)\n          tickLabel\n            .position(x: tickX, y: geometry.size.height - 16<\/span>)\n        }\n        \n        \/\/ add y-axis tick labels<\/span>\n        ForEach<\/span>(1<\/span>..<Int<\/span>(data.max<\/span> { $0.1<\/span> < $1.1<\/span> }!.1<\/span>), id: \\.self<\/span>) { i in<\/span>\n          let<\/span> tickLabel = Text<\/span>(\"\\(i)\"<\/span>)\n            .frame(width: 16<\/span>, height: 16<\/span>, alignment: .center)\n          let<\/span> tickY = CGFloat<\/span>(i) * geometry.size.height \/ CGFloat<\/span>(data.max<\/span> { $0.1<\/span> < $1.1<\/span> }!.1<\/span>)\n          tickLabel\n            .position(x: 16<\/span> - 5<\/span>, y: geometry.size.height - tickY)\n        }\n      }\n    }\n  }\n}\n<\/code><\/span>Code language:<\/span> Swift<\/span> (<\/span>swift<\/span>)<\/span><\/small><\/pre>","protected":false},"excerpt":{"rendered":"
Graphs and charts are an essential tool for visualizing data, and with SwiftUI, it’s easy to create custom and interactive graphs (Spoiler: we won’t add any interactivity during this arcticle). You can use them in iOS, iPadOS, and macOS apps. In this article, we’ll explore how to draw a line graph in SwiftUI. In a…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[3],"tags":[62,4,61],"class_list":["post-709","post","type-post","status-publish","format-standard","hentry","category-ios-development","tag-graphs","tag-ios","tag-swiftui"],"_links":{"self":[{"href":"https:\/\/mic.st\/blog\/wp-json\/wp\/v2\/posts\/709","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mic.st\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mic.st\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mic.st\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mic.st\/blog\/wp-json\/wp\/v2\/comments?post=709"}],"version-history":[{"count":10,"href":"https:\/\/mic.st\/blog\/wp-json\/wp\/v2\/posts\/709\/revisions"}],"predecessor-version":[{"id":868,"href":"https:\/\/mic.st\/blog\/wp-json\/wp\/v2\/posts\/709\/revisions\/868"}],"wp:attachment":[{"href":"https:\/\/mic.st\/blog\/wp-json\/wp\/v2\/media?parent=709"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mic.st\/blog\/wp-json\/wp\/v2\/categories?post=709"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mic.st\/blog\/wp-json\/wp\/v2\/tags?post=709"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
If you want to learn a little bit more about `GeometryReader`https:\/\/www.hackingwithswift.com\/books\/ios-swiftui\/understanding-frames-and-coordinates-inside-geometryreader<\/a> by Paul Hudson.<\/p>\n\n\n\n