# Chart Data driven

💙 Swift Chart automatically chooses an appropriate axis style to make the chart beautiful.

{% tabs %}
{% tab title="Code" %}

```swift
// We create data
// We use ForEach to iterate over the data

import Charts
import SwiftUI

struct Wines: Identifiable {
    var name: String
    var sales: Int
    
    var id: String { name }
}

let sales: [Wines] = [
    .init(name: "Margaux", sales: 500),
    .init(name: "Médoc", sales: 460),
    .init(name: "Blaye", sales: 300),
    .init(name: "St Estèphe", sales: 290),
    .init(name: "Sauternes", sales: 250),
    .init(name: "Pessac-Léognan", sales: 20)
]

struct ContentView: View {
    @State private var selection = 2
    
    var body: some View {
        TabView(selection: $selection) {
            WinesTab()
                .tabItem {
                    Label("Wines", systemImage: "chart.bar.doc.horizontal")
                }
                .tag(1)
        }
    }
}

struct WinesTab: View {
    var body: some View {
        Chart {
            ForEach(sales) { element in
                BarMark (
                    x: .value("Name", element.name),
                    y: .value("Sales", element.sales)
                )
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

```

{% endtab %}

{% tab title="Modifications" %}
**import** Charts

**import** SwiftUI

<br>

<mark style="color:orange;">**struct**</mark> <mark style="color:orange;"></mark><mark style="color:orange;">Wines: Identifiable {</mark>

&#x20;   <mark style="color:orange;">**var**</mark> <mark style="color:orange;"></mark><mark style="color:orange;">name: String</mark>

&#x20;   <mark style="color:orange;">**var**</mark> <mark style="color:orange;"></mark><mark style="color:orange;">sales: Int</mark>

&#x20;  &#x20;

&#x20;   <mark style="color:orange;">**var**</mark> <mark style="color:orange;"></mark><mark style="color:orange;">id: String { name }</mark>

<mark style="color:orange;">}</mark>

<br>

<mark style="color:orange;">**let**</mark> <mark style="color:orange;"></mark><mark style="color:orange;">sales: \[Wines] = \[</mark>

&#x20;   <mark style="color:orange;">.init(name: "Margaux", sales: 500),</mark>

&#x20;   <mark style="color:orange;">.init(name: "Médoc", sales: 460),</mark>

&#x20;   <mark style="color:orange;">.init(name: "Blaye", sales: 300),</mark>

&#x20;   <mark style="color:orange;">.init(name: "St Estèphe", sales: 290),</mark>

&#x20;   <mark style="color:orange;">.init(name: "Sauternes", sales: 250),</mark>

&#x20;   <mark style="color:orange;">.init(name: "Pessac-Léognan", sales: 20)</mark>

<mark style="color:orange;">]</mark>

<br>

**struct** ContentView: View {

&#x20;   @State **private** **var** selection = 2

&#x20;  &#x20;

&#x20;   **var** body: **some** View {

&#x20;       TabView(selection: $selection) {

&#x20;           WinesTab()

&#x20;               .tabItem {

&#x20;                   Label("Wines", systemImage: "chart.bar.doc.horizontal")

&#x20;               }

&#x20;               .tag(1)

&#x20;       }

&#x20;   }

}

<br>

**struct** WinesTab: View {

&#x20;   **var** body: **some** View {

&#x20;       Chart {

&#x20;           <mark style="color:orange;">ForEach(sales) { element</mark> <mark style="color:orange;"></mark><mark style="color:orange;">**in**</mark>

&#x20;               BarMark (

&#x20;                   x: .value("Name", element.name),

&#x20;                   y: .value("Sales", element.sales)

&#x20;               )

&#x20;           <mark style="color:orange;">}</mark>

&#x20;       }

&#x20;   }

}

<br>

**struct** ContentView\_Previews: PreviewProvider {

&#x20;   **static** **var** previews: **some** View {

&#x20;       ContentView()

&#x20;   }

}
{% endtab %}

{% tab title="Refactor" %}

```swift
// If ForEach is the only content in the chart, 
// we can also put the data directly into the chart initializer.

// We swapping the chart, we give the labels for each bar more space

import Charts
import SwiftUI

struct Wines: Identifiable {
    var name: String
    var sales: Int
    
    var id: String { name }
}

let sales: [Wines] = [
    .init(name: "Margaux", sales: 500),
    .init(name: "Médoc", sales: 460),
    .init(name: "Blaye", sales: 300),
    .init(name: "St Estèphe", sales: 290),
    .init(name: "Sauternes", sales: 250),
    .init(name: "Pessac-Léognan", sales: 20)
]

struct ContentView: View {
    @State private var selection = 2
    
    var body: some View {
        TabView(selection: $selection) {
            WinesTab()
                .tabItem {
                    Label("Wines", systemImage: "chart.bar.doc.horizontal")
                }
                .tag(1)
        }
    }
}

struct WinesTab: View {
    var body: some View {
        Chart(sales) { element in
                BarMark (
                    x: .value("Sales", element.sales),
                    y: .value("Name", element.name)
                )
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

```

{% endtab %}

{% tab title="Modifications" %}
**import** Charts

**import** SwiftUI

<br>

**struct** Wines: Identifiable {

&#x20;   **var** name: String

&#x20;   **var** sales: Int

&#x20;  &#x20;

&#x20;   **var** id: String { name }

}

<br>

**let** sales: \[Wines] = \[

&#x20;   .init(name: "Margaux", sales: 500),

&#x20;   .init(name: "Médoc", sales: 460),

&#x20;   .init(name: "Blaye", sales: 300),

&#x20;   .init(name: "St Estèphe", sales: 290),

&#x20;   .init(name: "Sauternes", sales: 250),

&#x20;   .init(name: "Pessac-Léognan", sales: 20)

]

<br>

**struct** ContentView: View {

&#x20;   @State **private** **var** selection = 2

&#x20;  &#x20;

&#x20;   **var** body: **some** View {

&#x20;       TabView(selection: $selection) {

&#x20;           WinesTab()

&#x20;               .tabItem {

&#x20;                   Label("Wines", systemImage: "chart.bar.doc.horizontal")

&#x20;               }

&#x20;               .tag(1)

&#x20;       }

&#x20;   }

}

<br>

**struct** WinesTab: View {

&#x20;   **var** body: **some** View {

&#x20;       <mark style="color:orange;">Chart(sales) { element</mark> <mark style="color:orange;"></mark><mark style="color:orange;">**in**</mark>

&#x20;               <mark style="color:orange;">BarMark (</mark>

&#x20;                   <mark style="color:orange;">x: .value("Sales", element.sales),</mark>

&#x20;                   <mark style="color:orange;">y: .value("Name", element.name)</mark>

&#x20;               <mark style="color:orange;">)</mark>

&#x20;       <mark style="color:orange;">}</mark>

&#x20;   }

}

<br>

**struct** ContentView\_Previews: PreviewProvider {

&#x20;   **static** **var** previews: **some** View {

&#x20;       ContentView()

&#x20;   }

}
{% endtab %}
{% endtabs %}