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?

score 9 · Accepted Answer · answered Sep 13 '22 at 15:46

9

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)

answered Sep 13 '22 at 15:46

Dragon

106
2

2

You sir, are a champ! – Yosi199 Sep 14 '22 at 04:56
The problem here ist that it only works if you want to use a single line. If you use multiple AreaMarks the are places on top of each other. – Tbi Jun 29 '23 at 11:26

Swift Charts AreaMark fill entire vertical height

1 Answers1