1

I am messing with the new swift charts library and its alignment is a little weird for the x values. When i specify AxisValueLabel(centered: true) the last value gets cut off(December in this case).

If I dont specify center=true, then the x value has leading alignment and it just looks off.

code for graph

struct graphOne: View {
    @ObservedObject var vm: CVVM

    @State private var position = 30
    var frameWidth = UIScreen.screenWidth
    var body: some View {
        
        Chart {
            ForEach(vm.currentUsage) { empRes in
            BarMark(
                    x: .value("Month", empRes.date, unit: vm.filter),
                    y: .value("energy", empRes.energyUsage)
                )
                //.foregroundStyle(.green)
                .annotation(position: .top) {
                    Text("\(empRes.energyUsage)")
                        .font(.caption)
                }
                .cornerRadius(5)
            }
        }
       
        .chartXAxis {
            AxisMarks(preset: .aligned, values: vm.currentUsage.map{ $0.date}) { date in
                AxisValueLabel(format: vm.chartType == "months" ? .dateTime.month() : .dateTime.day(), centerd: true)  
            }
            
        }
        
        .chartYAxis {
            AxisMarks(position: .leading)
        }
            
            
        
        .padding()
        .frame(width: frameWidth )
    }
    
}

enter image description here

Trey6
  • 67
  • 2
  • 8
  • As you can see this image shows when centered is false. if i use center=true then everything gets centered between the respective bar mark but Dec gets cut off – Trey6 Feb 17 '23 at 17:50
  • Does this answer your question? [Swift Charts will not display the last x-axis AxisValueLabel with AxisMarks](https://stackoverflow.com/questions/74240487/swift-charts-will-not-display-the-last-x-axis-axisvaluelabel-with-axismarks) – workingdog support Ukraine Feb 18 '23 at 00:25
  • I did see this, and unfortunately it didnt. ill have another go and see if I was missing something – Trey6 Feb 21 '23 at 20:23
  • can you show what you tried? Did you have something like `.chartXScale(domain: 0...vm.currentUsage.count)`. Whithout a minimal reproducible code see: [minimal code](https://stackoverflow.com/help/minimal-reproducible-example) it is difficult to debug your issue. – workingdog support Ukraine Feb 21 '23 at 23:36
  • When adding this, the graph disappears... code above has been updated how I have it added. – Trey6 Feb 22 '23 at 16:11
  • It actually wont let me edit the code above. But the .chartXScale is a modifier on the Chart{} so it was just added under that. code is all the same other than adding the chartXScale and like I said the graph disappears. – Trey6 Feb 22 '23 at 16:14
  • Figured it out. solution posted. Thanks for your help @workingdogsupportUkraine – Trey6 Feb 22 '23 at 16:31

1 Answers1

0

in the code I have posted I have a modifier on the Chart{} called

.chartXAxis{}

within this modifier I have the AxisMarks as follows

.chartXAxis{
    AxisMarks(preset: .aligned....){}
}

I found that in a tutorial somewhere and didn't think much of it. After removing the preset: .aligned my issues were solved.

SOLUTION

Chart{...}
.chartXAxis{
    AxisMarks(...){}
}

enter image description here

Trey6
  • 67
  • 2
  • 8