How do I remove the background lines of a chart

Question

Jamie13 OP

Created Sep ’22

Replies 2

Boosts 0

Views 3.4k

Participants 4

Hello, how do I remove the background lines of a chart and just show the BarMark?

import SwiftUI 
import Charts

struct myView: View {
var body: some View {
 Chart{
   BarMark(x: .value("o", 5), y: .value("m", "Duration: 5m"), width: 7)
 .foregroundStyle(.orange)

 BarMark(x: .value("o", 7), y: .value("m", "Intervals: 7"), width: 7)
.foregroundStyle(.teal)

      }
}
}

Boost

Answer 1

Eric-42 OP

Oct ’22

You can use the chartYAxis / chartXAxis modifiers specifying AxisMarks without any AxisGridLines or AxisTicks. Or set them with a clear foreground color.

Chart{
    BarMark(x: .value("o", 5),
            y: .value("m", "Duration: 5m"),
            width: 7)
        .foregroundStyle(.orange)
    
    BarMark(x: .value("o", 7),
            y: .value("m", "Intervals: 7"),
            width: 7)
        .foregroundStyle(.teal)
}
.chartYAxis {
    AxisMarks(position: .leading) { _ in
        AxisValueLabel()
    }
}
.chartXAxis {
    AxisMarks(position: .bottom) { _ in
        // AxisGridLine().foregroundStyle(.clear)
        // AxisTick().foregroundStyle(.clear)
        AxisValueLabel()
    }
}

3

Answer 2

Jeria OP

Oct ’22

You can also set the Visibility directly:

Chart{
    BarMark(x: .value("o", 5),
            y: .value("m", "Duration: 5m"),
            width: 7)
        .foregroundStyle(.orange)
    
    BarMark(x: .value("o", 7),
            y: .value("m", "Intervals: 7"),
            width: 7)
        .foregroundStyle(.teal)
}
.chartYAxis(.hidden)
.chartXAxis(.hidden)

2