Creating trend lines for 2 sets of datapoints

[shreyadsouza]

Related Discussion

Hi! I am currently working on plotting two sets of datapoints on a single Chart. While I am able to create two sets of marks based on feed type, I am unable to separate the trend lines between them; I currently see a single blue line interpolating between all points, first through bottleEntries sorted by time, and then through breastfeedingEntries sorted by time. The following is my code:

`struct FeedChart: View {
let entries: [FeedEntry]
// Flag to determine whether it's a mini chart or a full chart
var isMini: Bool

var body: some View {
    Chart {
        // Grouped points for Bottle Feeds
        let bottleEntries = entries
            .filter { $0.feedType == .bottle }
            .sorted(by: { $0.dateTime < $1.dateTime })

        if !bottleEntries.isEmpty {
            if !isMini {
                ForEach(bottleEntries) { entry in
                    PointMark(
                        x: .value("Time", entry.dateTime),
                        y: .value("Volume (ml)", entry.feedVolumeInML ?? 0)
                    )
                }
            }
            ForEach(bottleEntries) { entry in
                        LineMark(
                            x: .value("Time", entry.dateTime),
                            y: .value("Volume (ml)", entry.feedVolumeInML ?? 0)
                        )
                        .foregroundStyle(.blue)
                    }
        }

        // Grouped points for Breastfeeding
        let breastfeedingEntries = entries
            .filter { $0.feedType == .directBreastfeeding }
            .sorted(by: { $0.dateTime < $1.dateTime })

        if !breastfeedingEntries.isEmpty {
            if !isMini {
                ForEach(breastfeedingEntries) { entry in
                    PointMark(
                        x: .value("Time", entry.dateTime),
                        y: .value("Duration (min)", entry.feedTimeInMinutes ?? 0)
                    )
                }
                ForEach(breastfeedingEntries) { entry in
                    LineMark(
                        x: .value("Time", entry.dateTime),
                        y: .value("Duration (min)", entry.feedTimeInMinutes ?? 0)
                    )
                    .foregroundStyle(.pink)
                }
            }
        }
    }
    }
}

}`

Reproduction

Code included above.

Additional context

No response

Code of Conduct

• I agree to follow this course's Code of Conduct and Contributing Guidelines

[lukaskollmer]

you might need to specify the series parameter when creating PointMark or LineMark chart elements.
you can also use that to specify eg the respective colors or other chart options