iosswiftuichartsswiftui-charts

How can I add a border around a BarMark?


I am working with Apple's Charts framework and displaying a bar chart using BarMark to visualize data points. However, I want to add a visible border or outline around each bar to make them stand out more. I successfully added a border around the entire chart, but how can I add a border to each individual bar?

Here's a simplified version of my code for context:

import Charts

    Chart {
        ForEach(matchs, id: \.day) { match in
            BarMark(x: .value("day", match.day),
                    y: .value("point", match.point)
                )
                .opacity(1.0)
                .foregroundStyle(.red)
                .clipShape(RoundedRectangle(cornerRadius: 0))
        }
    }
    .chartPlotStyle { content incontent.border(.white, width: 1)}
    .frame(height: 250)

Solution

  • The solution is by using the annotation, and this is how it looks:

    Chart {
        ForEach(matchs, id: \.day) { match in
            BarMark(x: .value("day", match.day),
                    y: .value("point", match.point)
            )
            .opacity(1.0)
            .foregroundStyle(.red)
            .clipShape(RoundedRectangle(cornerRadius: 0))
            // Here is the addition of a border to the BarMark.
            .annotation(position: .overlay) {
                       Rectangle()
                        .stroke(Color.white, lineWidth: 1)
                          .padding(-4)
            }
        }
    }
    .frame(height: 250)
    // Here is the addition of a border to whol Chart
    .chartPlotStyle { content in
           content.border(.white, width: 1)
    }
    .padding(8)