🔪
Cutting-Edge SwiftUI Apps
  • 📳Cutting-Edge SwiftUI Apps
  • TUTORIALS AND TIPS
    • đź‘‹Introduction
  • ▶️Start with Charts
    • 👩‍💻Necessary Installations
    • Bar Mark
      • Chart Data driven
      • Xcode
    • Design as a time series
      • Bar graph
      • More data
      • Multi-series Line chart
  • ▶️New Window
    • 👩‍💻Necessary Installations
    • Single Unique Window
    • Menu bar
  • ▶️New Sharing
    • 👩‍💻Necessary Installations
    • ShareLink API
  • ▶️Start with Layout
    • Grid
  • WRAPPING IT UP
  • 🤸‍♀️Author
  • đź“–References
Powered by GitBook
On this page
  1. Start with Charts
  2. Bar Mark

Chart Data driven

And we can make the bar chart data driven with ForEach.

đź’™ Swift Chart automatically chooses an appropriate axis style to make the chart beautiful.

// 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()
    }
}

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()

}

}

// 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()
    }
}

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()

}

}

PreviousBar MarkNextXcode

Last updated 2 years ago

▶️