Hello, I would like to remive the axis lines/grid from a chart but retain the annotation. I've tried

.chartXAxis(.hidden)

... and this removed the lines but also the values on the chart axis.

Any advice?

Many thanks!

Can you show your code how you are adding .annotation to your chart, because when I tried hiding the x-axis, the annotation remained visible?

Sure, below is the chart , if I add

.chartYAxis(.hidden)

Under the final

.chartXAxis(.hidden)

I no longer see the month label.

// Highest & Lowest Performing Months
struct largeHighLowPerformingMonthsChart: View {

    @State private var showLargeChart = false

    struct mthData: Identifiable {
        var id = UUID()
        var month: String
        var visitValue: Int
        var color: String
    }

    let ytdData: [mthData] = [

        // Highest performing Months
        mthData(month: mp.mpHighestPerformingMonthName[0],
                visitValue: Int(mp.mpHighestRevenueMonth[0]),
                color: "Highest"),

        mthData(month: mp.mpHighestPerformingMonthName[1],
                visitValue: Int(mp.mpHighestRevenueMonth[1]),
                color: "Highest"),

        mthData(month: mp.mpHighestPerformingMonthName[2],
                visitValue: Int(mp.mpHighestRevenueMonth[2]),
                color: "Highest"),

        // Lowest performing Months
        mthData(month: mp.mpLowestPerformingMonthName[0],
                visitValue: mp.mpLowestRevenueMonth[0],
                color: "Lowest"),

        mthData(month: mp.mpLowestPerformingMonthName[1],
                visitValue: mp.mpLowestRevenueMonth[1],
                color: "Lowest"),

        mthData(month: mp.mpLowestPerformingMonthName[2],
                visitValue: mp.mpLowestRevenueMonth[2],
                color: "Lowest")
    ]

    var body: some View { //bloo
        GroupBox ("Highest & Lowest Performing Months") {

            Chart {
                ForEach(ytdData) { mthData in
                    BarMark(
                        x: .value("Organic Revenue", mthData.visitValue),
                        y: .value("Month", mthData.month),
                        width: .ratio(0.6)
                    )
                    .annotation(position: .trailing) {
                        Text("\(mv.localCurrency)")
                            .font(.system(size: 18, weight: .semibold, design: .rounded))
                            .foregroundColor(.gray)
                        + Text("\(mthData.visitValue)")
                            .font(.system(size: 18, weight: .semibold, design: .rounded))
                            .foregroundColor(.gray)
                    }
                    .foregroundStyle(by: .value("Bar Color", mthData.color))
                    .opacity(mv.mobOpacity)
                    .cornerRadius(10)
                }
            }
            .chartForegroundStyleScale(["Highest": .green, "Lowest": .red])
            .chartLegend(position: .top, alignment: .bottomTrailing)
            .chartXAxis(.hidden)
        }
    }
}

FYI this is aa vertical bar chart i made by swapping the X/Y axis.

I tried your code, using some sample data I created, and I tried several variations of the chart x & y axes being hidden or visible.

I could not reproduce the observation you reported. The annotation remain visible. I even tried changing the position of the annotation, and it remained visible even when I modified the visibility of the x & y axes.

Not sure what to suggest at the moment, unless someelse experiences something similar to your observation.

Here is my version of your code, that I used. I replaced some of your calculated parameters with fixed values, adding your 'Highest" and "Lowest' colours into the 'assets'.

struct ContentView: View {

    @State private var showLargeChart = false

    struct mthData: Identifiable {
        var id = UUID()
        var month: String
        var visitValue: Int
        var color: String
    }

    let ytdData: [mthData] = [
        // Highest performing Months
        mthData(month: "Jan", visitValue: 110, color: "Highest"),
        mthData(month: "May", visitValue: 95, color: "Highest"),
        mthData(month: "Apr", visitValue: 90, color: "Highest"),
        // Lowest performing Months
        mthData(month: "Nov", visitValue: 14, color: "Lowest"),
        mthData(month: "Aug", visitValue: 17, color: "Lowest"),
        mthData(month: "Mar", visitValue: 18, color: "Lowest")
    ]

    var body: some View {
        GroupBox ("Highest & Lowest Performing Months") {
            Chart {
                ForEach(ytdData) { mthData in
                    BarMark(
                        x: .value("Organic Revenue", mthData.visitValue),
                        y: .value("Month", mthData.month),
                        width: .ratio(0.6)
                    )
                    .annotation(position: .trailing) {
                        Text("$")
                            .font(.system(size: 18, weight: .semibold, design: .rounded))
                            .foregroundColor(.gray)
                        + Text("\(mthData.visitValue)")
                            .font(.system(size: 18, weight: .semibold, design: .rounded))
                            .foregroundColor(.gray)
                    }
                    .foregroundStyle(by: .value("Bar Color", mthData.color))
                    .opacity(0.6)
                    .cornerRadius(10)
                }
            }
            .chartForegroundStyleScale(["Highest": .green, "Lowest": .red])
            .chartLegend(position: .top, alignment: .bottomTrailing)
            .chartXAxis(.hidden)
//            .chartYAxis(.hidden)
        }
    }
}

hum, thank you very much. I'll need to review in that case because I certanly do not see the annotation. I'm just getting used to charts. I appriciate your help!

I do have have another charts question, i'll put that in a new thread.

Here you go. When I add

            .chartYAxis(.hidden)

I do not see the month.

First image as per code above, second image with

            .chartYAxis(.hidden)

https://imgur.com/a/7Qishi3