Swift Charts AreaMark fill entire vertical height

Question

I've got this very simple chart, nothing fancy - just takes up stock indicator prices and shows them.

    VStack {
        Chart {
            ForEach(viewmodel.chartData1) { chartData in
                LineMark(x: .value("date", chartData.date),
                         y: .value("amount", chartData.close))
                .interpolationMethod(.catmullRom)
                
                AreaMark(x: .value("date", chartData.date),
                         y: .value("amount", chartData.close))
                .interpolationMethod(.catmullRom)
            }
        }
        .animation(.easeIn, value: viewmodel.chartData1.count)
        .frame(height: 300)
        .chartYScale(domain: viewmodel.range.0...viewmodel.range.1)
        Spacer()
    }
    .padding(.horizontal, 16)
    .task { await viewmodel.getSymbols() }

If I comment out the AreaMarks - the LineMark will look as I expect:

But, when adding the area it breaks:

Any ideas what did I missed here?

Answer 1

Heyo. I was running into the same issue you were. I was able to address this by using AreaMark(x:ystart:yend:) instead of AreaMark(x:y:).

Not exactly sure about your use case but maybe something like this? You'll have to play around with the start and end values to get it how you need. Hope this helps!

AreaMark(
    x: .value("date", chartData.date),
    yStart: .value("amount", chartData.close),
    // get the max close value or adjust to your use case
    yEnd: .value("amountEnd", chartData1.max{ $0.close > $1.close }!)
)
.interpolationMethod(.catmullRom)