swiftswiftui

How to set axis order in AxisMarks in SwiftUI Chart view


My app displays a chart using LineMarks. I want my Y axis to have at the bottom 0, and at the top 15. Like this: Correct Y axis This works fine unless all the values are 0, in which case the Y axis is inversed: Inversed Y axis

Chart {
                ForEach(manager.data) {
                    LineMark(
                        x: .value("Date", $0.date),
                        y: .value("Count", $0.value)
                    )
                    .symbol {
                        Circle()
                            .frame(width: 5, height: 5)
                    }
                }
            }
            .chartXAxis {
                AxisMarks(preset: .aligned , values: manager.last15days) { value in
                    if ((value.index+1) % 3 == 0 || value.index == 0) {
                        let date = manager.last15days[value.index]
                        let stringFormatted = manager.formatter.string(from: date)
                        AxisValueLabel(stringFormatted)
                            .offset(y: 10)
                    }
                }
            }
            .chartYAxis {
                    let values = [0, 3, 6, 9, 12, 15]
                    AxisMarks(values: values) { value in
                        AxisValueLabel("\(values[value.index])").offset(x: 15)
                        AxisGridLine()
                    }
            }
            .listRowBackground(Color.clear)
            .foregroundStyle(Color(.blue))
            .frame(height: 300)
            .padding()

I tried reversind the values array to this: let values = [15, 12, 9, 6, 3, 0] and it did not work.


Solution

  • Setting the Y axis domain fixes this issue.

    .chartYScale(domain: 0...15)
    

    Make sure to use a range that includes all the y values. [0, 3, 6, 9, 12, 15] are just the axis labels you want, whereas the domain is the whole range of y values that you want to display.