TEAM LICENSES: Save money and learn new skills through a Hacking with Swift+ team license >>

SOLVED: Issue with Charts and multiple LineMark: don't know how to display the legend for each LineMark

Forums > SwiftUI

Greetings,

I've seen plenty of examples on the web on how to display the legend of each LineMark, when you use multiple of them in the same Chart, but none apply to me, as the way I retrieve the data is different from the quick demo they use.

Here is my data structure:

struct MeasuresHistory: Identifiable {
    let id:Int
    let measureDate:String
    let chestValue1:Int32
    let bellyValue1:Int32
    let thighValue1:Int32
    let chestValue2:Int32
    let bellyValue2:Int32
    let thighValue2:Int32
    let chestValue3:Int32
    let bellyValue3:Int32
    let thighValue3:Int32
    let age:Int32
    let waist:Double
    let height:Double
    let weight:Double
    let gripR:Double
    let gripL:Double
    let bodyFat:Double
    let fatBodyMass:Double
    let leanBodyMass:Double
    let bmi:Double
    let comments:String
    let someDummyColumn:String

    init(raw:[String]) {
        self.id = Int(raw[0])!
        self.measureDate = raw[1]
        self.chestValue1 = Int32(raw[2])!
        self.bellyValue1 = Int32(raw[3])!
        self.thighValue1 = Int32(raw[4])!
        self.chestValue2 = Int32(raw[5])!
        self.bellyValue2 = Int32(raw[6])!
        self.thighValue2 = Int32(raw[7])!
        self.chestValue3 = Int32(raw[8])!
        self.bellyValue3 = Int32(raw[9])!
        self.thighValue3 = Int32(raw[10])!
        self.age = Int32(raw[11])!
        self.waist = Double(raw[12])!
        self.height = Double(raw[13])!
        self.weight = Double(raw[14])!
        self.gripR = Double(raw[15])!
        self.gripL = Double(raw[16])!
        self.bodyFat = Double(raw[17])!
        self.fatBodyMass = Double(raw[18])!
        self.leanBodyMass = Double(raw[19])!
        self.bmi = Double(raw[20])!
        self.comments = raw[21]
        self.someDummyColumn = raw[22]
    }

}

And in the Chart, for each LineMark, I take the date, that is the same for each of them, as the X Axis, and for the Y Axis, I take, for instance, gripL and gripR from the same line in the array. I have another one where I take weight, leanBodyMass and fatBodyMass.

I can render the Chart well, just missing the legend. Here is a code example for one of the charts (removed some of the code not relevant to the issue, like the PointMark and AreaMark for example):

Chart {
                            ForEach(measuresToShow) { measure in
                                let date: Date = Charts.dateFormatter.date(from: measure.measureDate)!

                                LineMark(
                                    x: .value("Date Weight", date),
                                    y: .value("Weight", measure.weight),
                                    series: .value("Weight", "A")
                                )
                                .foregroundStyle(.blue)
                                .interpolationMethod(.cardinal)

                                LineMark(
                                    x: .value("Date LBM", date),
                                    y: .value("Lean Body Mass", measure.leanBodyMass),
                                    series: .value("Lean Body Mass", "B")
                                )
                                .foregroundStyle(.teal)
                                .interpolationMethod(.cardinal)

                                LineMark(
                                    x: .value("Date FBM", date),
                                    y: .value("Fat Body Mass", measure.fatBodyMass),
                                    series: .value("Fat Body Mass", "C")
                                )
                                .foregroundStyle(.indigo)
                                .interpolationMethod(.cardinal)
                        } // end Chart

This is how it shows:

This is what I'm missing (the highlighted part at the bottom):

Is there any way I can do that, the way I use the information to populate the Chart?

Thank you

1      

To make this work, you have to use foregroundStyle(by:) modifier and specify the property you want to group by. The chart is smart enough to do the rest. The chart will also add a legend at the bottom.

1      

Great, thanks! Once I found out where to add it, works like a charm. Needed a minute to figure out how to make the legend color match my lines, but now it's all good!

1      

Hacking with Swift is sponsored by String Catalog.

SPONSORED Get accurate app localizations in minutes using AI. Choose your languages & receive translations for 40+ markets!

Localize My App

Sponsor Hacking with Swift and reach the world's largest Swift community!

Archived topic

This topic has been closed due to inactivity, so you can't reply. Please create a new topic if you need to.

All interactions here are governed by our code of conduct.

 
Unknown user

You are not logged in

Log in or create account
 

Link copied to your pasteboard.