0

Looking to have a Bar Chart in my View on watchOS and under it have two navigation links. The problem is the graph always ends up being smushed and if I wish to restore it to its unsmushedness I need to move it out of the ScrollView and VStack.

I ultimately want the graph to be unsmushed and sitting above the Navigation Links.

Here is the code snippet:

struct Home: View {
    var body: some View {
        ScrollView {
            // HealthKit data to dynamically adjust levels goes here
            let values = [3, 11, 3, 12, 8, 10, 9]
            let labels = ["3", "11", "3", "12", "8", "10", "9"]
            let xAxisLabels = ["M", "T", "W", "T", "F", "S", "S"]
            DrinkChart(values: values, labels: labels, xAxisLabels: xAxisLabels)
            VStack {
                //Navigate to Repository
                NavigationLink(destination: Repository()) {
                    Text("Repository")
                }
                //Navigate to Taxi
                NavigationLink(destination: Taxi()) {
                    Text("Taxi")
                }
            }
        }
    }
}

struct Home_Previews: PreviewProvider {
    static var previews: some View {
        Home()
    }
}

Graph Inside VStack

Graph Outside VStack but inside ScrollView

Graph Outside ScrollView

As you can see I either have a smushed graph or no Navigation Links.

Anyone know a way of circumventing this? I have tried adding a .frame() to the graph function but that did nothing.

Dezkiir
  • 19
  • 4

1 Answers1

0

Figured it out, by adding the .scaledToFit() function after the DrinkChart function it will auto scale accordingly.

DrinkChart(values: values, labels: labels, xAxisLabels: xAxisLabels).scaledToFit()
Dezkiir
  • 19
  • 4