Home > Software engineering >  Swift Charts will not display the last x-axis AxisValueLabel with AxisMarks
Swift Charts will not display the last x-axis AxisValueLabel with AxisMarks

Time:10-29

I am using the new swift charts framework to display some data. In seeking to manually control the frequency of the x-axis AxisValueLabels, as well as adjust the color, I implemented the following:

AxisMarks(values: .automatic(desiredCount: 11, roundLowerBound: true, roundUpperBound: true)) { _ in
               AxisGridLine(stroke: .init(lineWidth: 1)).foregroundStyle(Color.orange)
               AxisValueLabel().foregroundStyle(Color.orange).font(.subheadline).offset(x: -10)  }  }

I would like to show on value for each x-axis value (there are 11 points and it is only showing 10). I have tried countless things and can not get it to show as it should by adjusting the desiredCount parameter. Would appreciate any help in this matter..

import SwiftUI
import Foundation
import Charts

struct FakeData: Codable {
    var questionAndAnswers: [Int: Int]
    var timePerQuestion: [Double]
    var date: Date = .now
}


extension FakeData {
    
    static let oneFakeInstance = FakeData(questionAndAnswers:  [1875: 1875,
                                                  1890: 1890,
                                                  1980: 1980,
                                                  2112: 2112,
                                                  2726: 2726,
                                                  4088: 4088,
                                                  4284: 4284,
                                                  4784: 4784,
                                                  4800: 4800,
                                                  663: 663,
                                                1098:1098], timePerQuestion: [
                                                    28.700000000000138,
                                                    11.600000000000165,
                                                    12.00000000000017,
                                                    25.599999999999376,
                                                    11.999999999999318,
                                                    19.19999999999891,
                                                    12.799999999999272,
                                                    7.199999999999605,
                                                    11.699999999999335,
                                                    39.299999999997766,19.299999999997766
                                                ])
    
}
struct CH1: View {
    
    func convertToShowable(_ QuizquestionAnswers: [Int: Int] = FakeData.oneFakeInstance.questionAndAnswers, _ quizTimes: [Double] = FakeData.oneFakeInstance.timePerQuestion) -> [Int: Double] {
        var time_per_question: [Int: Double] = [:]
        for (index, key_value) in QuizquestionAnswers.enumerated() {
            if key_value.value == key_value.key {
                time_per_question[index] = quizTimes[index]
            }
        }
        return time_per_question
    }
    
    var body: some View {
        
        
        ZStack {
            Color.black.edgesIgnoringSafeArea(.all)
        
            VStack {
                
                Chart {
                    ForEach(convertToShowable().sorted(by: {$0.key < $1.key}), id: \.key) { key, value in
                        BarMark(x: .value("Question", key),
                                y: .value("Time", value))
                        .foregroundStyle(Color.white)
                    }
                    
                }
                .chartYAxis {
                    AxisMarks(values: .automatic) { _ in
                        AxisValueLabel().foregroundStyle(Color.orange).offset(x: 10).font(.subheadline)
                    
                    }
                }
                
                .chartXAxis {
                    AxisMarks(values: .automatic(desiredCount: 11, roundLowerBound: true, roundUpperBound: true)) { _ in
                        AxisGridLine(stroke: .init(lineWidth: 1)).foregroundStyle(Color.orange)
                        AxisValueLabel().foregroundStyle(Color.orange).font(.subheadline).offset(x: -10)
                   
                    }
                    
                }
                
                .frame(width: 350, height: 250)}}}}
```[![You can see there should be a 10 here, but there is nothing][1]][1]


  [1]: https://i.stack.imgur.com/sYfXa.png

CodePudding user response:

try this to display your 11 points:

 .chartXScale(domain: 0...11)
  • Related