Multi-series Line chart

🔥 Create a SwiftUI file called : SalesDetailsChart

BarMark

// Create a variable for the seriesData

import Charts
import SwiftUI

struct Series: Identifiable {
    let city: String
    let sales: [SalesSummary]
    
    var id: String { city }
}

let seriesData: [ Series] = [
    .init(city: "Paris", sales: parisData),
    .init(city: "Amsterdam", sales: amsData)
]

struct SalesDetailsChart: View {
    var body: some View {
        Chart {
            ForEach(parisData) { element in
                BarMark(
                    x: .value("Day", element.weekday, unit: .day),
                    y: .value("Sales", element.sales)
                )
            }
        }
    }
}

struct SalesDetailsChart_Previews: PreviewProvider {
    static var previews: some View {
        SalesDetailsChart()
    }
}

LineMark

//

import Charts

import SwiftUI

struct Series: Identifiable {

let city: String

let sales: [SalesSummary]

var id: String { city }

}

let seriesData: [ Series] = [

.init(city: "Paris", sales: parisData),

.init(city: "Amsterdam", sales: amsData),

]

struct SalesDetailsChart: View {

var body: some View {

Chart(seriesData) { series in

ForEach(series.sales) { element in

LineMark(

x: .value("Day", element.weekday, unit: .day),

y: .value("Sales", element.sales)

)

.foregroundStyle(by: .value("City", series.city))

}

}

}

}

struct SalesDetailsChart_Previews: PreviewProvider {

static var previews: some View {

SalesDetailsChart()

.padding()

.frame(height: 200)

}

}

import Charts
import SwiftUI

struct Series: Identifiable {
    let city: String
    let sales: [SalesSummary]
    
    var id: String { city }
}

let seriesData: [ Series] = [
    .init(city: "Paris", sales: parisData),
    .init(city: "Amsterdam", sales: amsData),
]

struct SalesDetailsChart: View {
    var body: some View {
        Chart(seriesData) { series in
            ForEach(series.sales) { element in
                LineMark(
                    x: .value("Day", element.weekday, unit: .day),
                    y: .value("Sales", element.sales)
                )
                .foregroundStyle(by: .value("City", series.city))
            }
        }
    }
}

struct SalesDetailsChart_Previews: PreviewProvider {
    static var previews: some View {
        SalesDetailsChart()
            .padding()
            .frame(height: 200)
    }
}

Combine Multiple Mark

// Swift Charts can combine multiple mark // We set the symbol to be derived from the city : each point indicate the city by his color and symbol

import Charts

import SwiftUI

struct Series: Identifiable {

let city: String

let sales: [SalesSummary]

var id: String { city }

}

let seriesData: [ Series] = [

.init(city: "Paris", sales: parisData),

.init(city: "Amsterdam", sales: amsData),

]

struct SalesDetailsChart: View {

var body: some View {

Chart(seriesData) { series in

ForEach(series.sales) { element in

LineMark(

x: .value("Day", element.weekday, unit: .day),

y: .value("Sales", element.sales)

)

.foregroundStyle(by: .value("City", series.city))

PointMark(

x: .value("Day", element.weekday, unit: .day),

y: .value("Sales", element.sales)

)

.foregroundStyle(by: .value("City", series.city))

.symbol(by: .value("City", series.city))

}

}

}

}

struct SalesDetailsChart_Previews: PreviewProvider {

static var previews: some View {

SalesDetailsChart()

.padding()

.frame(height: 200)

}

}

import Charts
import SwiftUI

struct Series: Identifiable {
    let city: String
    let sales: [SalesSummary]
    
    var id: String { city }
}

let seriesData: [ Series] = [
    .init(city: "Paris", sales: parisData),
    .init(city: "Amsterdam", sales: amsData),
]

struct SalesDetailsChart: View {
    var body: some View {
        Chart(seriesData) { series in
            ForEach(series.sales) { element in
                LineMark(
                    x: .value("Day", element.weekday, unit: .day),
                    y: .value("Sales", element.sales)
                )
                .foregroundStyle(by: .value("City", series.city))
                PointMark(
                    x: .value("Day", element.weekday, unit: .day),
                    y: .value("Sales", element.sales)
                )
                .foregroundStyle(by: .value("City", series.city))
                .symbol(by: .value("City", series.city))
            }
        }
    }
}

struct SalesDetailsChart_Previews: PreviewProvider {
    static var previews: some View {
        SalesDetailsChart()
            .padding()
            .frame(height: 200)
    }
}

Refactor

// Because it is common to see point on a line, Swift Charts has a shorthand for this. We will apply the symbol modifier to the LineMark.

import Charts
import SwiftUI

struct Series: Identifiable {
    let city: String
    let sales: [SalesSummary]
    
    var id: String { city }
}

let seriesData: [ Series] = [
    .init(city: "Paris", sales: parisData),
    .init(city: "Amsterdam", sales: amsData),
]

struct SalesDetailsChart: View {
    var body: some View {
        Chart(seriesData) { series in
            ForEach(series.sales) { element in
                LineMark(
                    x: .value("Day", element.weekday, unit: .day),
                    y: .value("Sales", element.sales)
                )
                .foregroundStyle(by: .value("City", series.city))
                .symbol(by: .value("City", series.city))
            }
        }
    }
}

struct SalesDetailsChart_Previews: PreviewProvider {
    static var previews: some View {
        SalesDetailsChart()
            .padding()
            .frame(height: 200)
    }
}