SwiftUI Charts AreaMark Colors

Question

How can i set the AreaMarks to the colors I want and not the standard colors, while still getting the legend to show with the correct colors. If i do it the way below usng foregroundStyle(by:), I don't get to select the colors. Alternatively, if i setup my own array of colors and use the commented out line, then I don't get the legend at the bottom of the chart. If i leave in both lines, then i get the right colors in the chart, and i get the legend, but the legend has the standard colors, not mine.

Chart(simulationRange) {
    AreaMark(
        x: .value("Date", $0.date),
        yStart: .value("Minimum Value", $0.minValue),
        yEnd: .value("Maximum Value", $0.maxValue)
    )
    //                .foregroundStyle(areaColors[$0.series]!)
    .foregroundStyle(by: .value("Quartile", $0.series))
}

Answer 1

I think you are looking for the chartForegroundStyle modifier on the Chart. You can pass a mapping from the values of your data's series property to the Colors you want.

For example:

Chart(points) { point in
    AreaMark(
        x: .value("X", point.x),
        yStart: .value("minY", point.minY),
        yEnd: .value("maxY", point.maxY)
    )
    .foregroundStyle(by: .value("Series", point.series))
}
.chartForegroundStyleScale([
    "red": Color.red, 
    "blue": Color.blue
])

with points looking like this:

@State var points = [
    DataPoint(x: 0, minY: 1, maxY: 2, series: "red"),
    DataPoint(x: 1, minY: 2, maxY: 4, series: "red"),
    DataPoint(x: 2, minY: 3, maxY: 6, series: "red"),
    DataPoint(x: 3, minY: 4, maxY: 8, series: "blue"),
    DataPoint(x: 4, minY: 5, maxY: 10, series: "blue"),
]

The output looks like: