> For the complete documentation index, see [llms.txt](https://betty-dev.gitbook.io/cutting-edge-swiftui-apps/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://betty-dev.gitbook.io/cutting-edge-swiftui-apps/start-with-charts/design-as-a-time-series/multi-series-line-chart.md).

# Multi-series Line chart

🔥 Create a SwiftUI file called : `SalesDetailsChart`

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

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

```

{% endtab %}

{% tab title="LineMark" %}
// 

**import** Charts

**import** SwiftUI

<br>

**struct** Series: Identifiable {

&#x20;   **let** city: String

&#x20;   **let** sales: \[SalesSummary]

&#x20;  &#x20;

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

}

<br>

**let** seriesData: \[ Series] = \[

&#x20;   .init(city: "Paris", sales: parisData),

&#x20;   .init(city: "Amsterdam", sales: amsData),

]

<br>

**struct** SalesDetailsChart: View {

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

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

&#x20;           ForEach(series.sales) { element **in**

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

&#x20;                   x: .value("Day", element.weekday, unit: .day),

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

&#x20;               )

&#x20;              <mark style="color:orange;">.foregroundStyle(by: .value("City", series.city))</mark>

&#x20;           }

&#x20;       }

&#x20;   }

}

<br>

**struct** SalesDetailsChart\_Previews: PreviewProvider {

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

&#x20;       SalesDetailsChart()

&#x20;           .padding()

&#x20;           .frame(height: 200)

&#x20;   }

}

```swift
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)
    }
}

```

{% endtab %}

{% tab title="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

<br>

**struct** Series: Identifiable {

&#x20;   **let** city: String

&#x20;   **let** sales: \[SalesSummary]

&#x20;  &#x20;

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

}

<br>

**let** seriesData: \[ Series] = \[

&#x20;   .init(city: "Paris", sales: parisData),

&#x20;   .init(city: "Amsterdam", sales: amsData),

]

<br>

**struct** SalesDetailsChart: View {

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

&#x20;       Chart(seriesData) { series **in**

&#x20;           ForEach(series.sales) { element **in**

&#x20;               LineMark(

&#x20;                   x: .value("Day", element.weekday, unit: .day),

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

&#x20;               )

&#x20;               .foregroundStyle(by: .value("City", series.city))

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

&#x20;                   <mark style="color:orange;">x: .value("Day", element.weekday, unit: .day),</mark>

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

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

&#x20;               <mark style="color:orange;">.foregroundStyle(by: .value("City", series.city))</mark>

&#x20;               <mark style="color:orange;">.symbol(by: .value("City", series.city))</mark>

&#x20;           }

&#x20;       }

&#x20;   }

}

<br>

**struct** SalesDetailsChart\_Previews: PreviewProvider {

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

&#x20;       SalesDetailsChart()

&#x20;           .padding()

&#x20;           .frame(height: 200)

&#x20;   }

}<br>

```swift
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)
    }
}

```

{% endtab %}

{% tab title="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.<br>

```swift
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)
    }
}

```

<br>
{% endtab %}
{% endtabs %}