Search code examples
swiftuiswiftui-charts

Creating line chart with multiple lines


Looking over Apple Documentation I found a straightforward way of doing this provided your dataset is structured correctly (mine is not). I've been working with a CSV file containing rows structured as below:

PM2.5 data, PM10 data, DateTime
PM2.5 data, PM10 data, DateTime
...

And I've parsed each row into a Measurement object:

struct Measurement: Identifiable {
    var id: String // time of measurement 
    var pm25: Float
    var pm10: Float
}

I naively assumed I could just add multiple line marks as so (measurements is an array of Measurement objects):

            Chart(measurements){
                LineMark (
                    x: .value("Time", $0.id),
                    y: .value("PM2.5", $0.pm25)
                )
                
                LineMark (
                    x: .value("Time", $0.id),
                    y: .value("PM2.5", $0.pm10)
                )
            }

But this does not create multiple lines. Can anyone provide any suggestions on how to achieve this using Swift Charts in Swift UI? I found many solutions on Stack Overflow but they are for Swift 4 or older, nothing for SwiftUI.


Solution

  • you could try this simple approach, using the series version of LineMark:

    Chart(measurements) {
        LineMark(
            x: .value("Time", $0.id),
            y: .value("PM2.5", $0.pm25),
            series: .value("pm25", "A")  // <-- here
        ).foregroundStyle(.red)
        
        LineMark(
            x: .value("Time", $0.id),
            y: .value("PM1.0", $0.pm10),
            series: .value("pm10", "B")   // <-- here
        ).foregroundStyle(.green)
    }