swiftuiswiftui-charts

Swift Charts AreaMark fill entire vertical height

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: enter image description here

But, when adding the area it breaks:

enter image description here

Any ideas what did I missed here?

Solution

  • 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)